<template>
	<div class="editjiemuBox" :class="{actived:true}">
		<div class="editList">
			<div class="listLeft">
				<!-- 添加分区类型 -->
				<div class="btnType">
					<div v-for="(item,index) in btnData" @click="addText(index)" :key="index">
						<span :class="item.ico"></span>
						<p>{{item.title}}</p>
					</div>
				</div>

				<div class="programMsg" @click="msgBtn">
					<span class="el-icon-star-on"></span>节目信息
				</div>
				<ul class="ulAddBox">
					<li v-for="(item,index) in addList" :class="{active:index==textIndex}" :key="index"
						@click="checkList(index)">
						<p>
							<span :class="item.ico"></span>
							{{item.title}}
						</p>
						<span class="el-icon-close" @click.stop="deteleZone(index)"></span>
					</li>
				</ul>
			</div>
			<div class="viewDom" :class="{viewDomTwo:isWidthHeight}" ref='chanimate'>
				<!-- 展示区 -->
				<div class="viewDom-top" v-show="!isPreview">
					<ul class="viewDom-vi" :style="ulStyle">
						<li class="viewLiDom" v-for="(item,index) in addList" :style="liStyles[index]"
							@click="checkList(index)" :class="{bgcActive:index==textIndex}" :key="index">
							<div class="itsShow">
								<div v-if="item.areaType==1||item.areaType==6||item.areaType==5" class="spanBox" :style="styleStr[index]">{{msg[index]}}</div>
								<div v-if="item.areaType==2||item.areaType==3" class="spanBox" :style="styleStr[index]">
									<div v-for="(items,indexs) in dialogImageUrl[index]" :key='indexs'><img :src="items" alt=""></div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 预览区 -->
				<div class="viewDom-top" v-show="isPreview">
					<ul class="viewDom-vi" :style="ulStyle">
						<li class="viewLiDom" v-for="(item,index) in addList" :style="liStyles[index]"
							@click="checkList(index)" :class="{bgcActive:index==textIndex}" :key="index">
							<div class="itsShow">
								<div v-if="item.areaType==1||item.areaType==6" class="spanBox" :style="styleStr[index]">
									{{msg[index]}}</div>
								<div v-if="item.areaType==2||item.areaType==3" class="spanBox" :style="styleStr[index]">
									<div v-for="(items,indexs) in dialogImageUrl[index]" :key='indexs'>
										<img :src="items" alt="">
									</div>
								</div>
								<div v-if="item.areaType==5" class="spanBox" :style="styleStr[index]">
									地方撒多
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div>
					<!-- 按钮区 -->
					<div class="btnKiss">
						<el-button type="info" @click='backList()'>返回</el-button>
						<el-button type="primary" @click='previewDome()'>预览</el-button>
						
						<el-button type="success" @click='addPrograms'>{{btnText}}</el-button>
						<span style="margin-left: 10px;">布局结构：</span>
						<el-select v-model="value2" placeholder="请选择布局结构">
							<el-option v-for="(item,index) in layoutStructure" :key="item.value" :label="item.label"
								:value="item.value" @click.native="layoutChange(index)">
							</el-option>
						</el-select>
					</div>
					<!-- 功能区 -->
					<div class="selectBox" style="background-color: #ffebcd;">
						<div class="programMsgshuju" v-show="isprogramTitle">
							<!-- 节目名称-->
							<div class="ddf">
								<span>节目名称：</span>
								<el-input placeholder="请输入内容" v-model="addProgramParm.pTitle" style='width: 58%;'>
								</el-input>
							</div>
							<!-- 节目序号 -->
							<div class="ddf" v-if="flag">
								<span>{{programsNos.title}}：</span>
								<el-select v-model="value4" :placeholder="programsNos.title" style="width: 58%;">
									<el-option v-for="(items,indexs) in programsNos.options" :key="items.value"
										:disabled="items.configStatus==1" :label="items.configName"
										:value="items.configNum" @click.native="programNoChange(indexs)">
									</el-option>
								</el-select>
							</div>
							<!-- 节目类型，播放语音，播放类型 -->
							<div class="ddf" v-for="(item,index) in arr2" :key='index'>
								<span>{{item.title}}：</span>
								<el-select v-model="value3[index]" :placeholder="item.title" style="width: 58%;">
									<el-option v-for="(items,indexs) in item.options" :key="items.value"
										:label="items.label" :value="items.value"
										@click.native="programChange(index,indexs)">
									</el-option>
								</el-select>
							</div>
							<!-- 播放次数 -->
							<div class="ddf">
								<span>{{broadcast}}：</span>
								<el-input-number v-model="broadcastNum" controls-position="right"
									@change="handleChange2" :min="1" :max="255" :step="1" style='width: 58%;'>
								</el-input-number>
							</div>
							<!-- 语音文本 -->
							<div class="ddf" style="width:100%;" v-show='isvoiceValue'>
								<span>语音文本：</span>
								<el-input v-model='voiceValue' placeholder='请输入语音文本'
									style='width: 85%;margin-top: 5px;margin-left: 0;'></el-input>
							</div>
							<!-- 星期选择 -->
							<div class="ddy">
								<span>星期选择：</span>
								<el-select v-model="valueDay" multiple placeholder="请选择" @change='valueDayChange'>
									<el-option v-for="item in valueDayOptions" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</div>
							<!-- 播放日期 -->
							<div class="ddf dda">
								<div class="block">
									<span>播放日期：</span>
									<el-date-picker v-model="valueDate" type="daterange" range-separator="至"
										start-placeholder="2012-01-01" end-placeholder="2030-12-31" @change='changeDate'
										value-format="yyyy-MM-dd" style="width: 70%;">
									</el-date-picker>
								</div>
							</div>
							<div class="ddf" style="width:30%;padding-top: 5px;">
								<el-checkbox v-model="checked" @change='timeExtend'
									style='border: 1px solid gray;padding: 6px 20px;border-radius: 5px;background-color:#ffffff;'>
									时段信息扩展</el-checkbox>
							</div>
							
							<!-- 时间个数 -->
							<div class="ddd" v-if="checked">
		
								<div class="ddz">
									<span>时间个数：</span>
									<el-select v-model="valueNumber" clearable placeholder="请选择">
										<el-option v-for="(item,index) in valueNumberOptions" :key="item.value"
											:label="item.label" :value="item.value"
											@click.native="valueNumberChange(index)">
										</el-option>
									</el-select>
									<el-checkbox v-model="checked2" @change='isCirculate'
										style='border: 1px solid gray;padding: 6px 15px;border-radius: 5px;background-color:#FFFFFF;margin-left: 20px;'>
										单循环播放</el-checkbox>
								</div>

								<!-- 开始时间-结束时间 -->
								<div class="ddk">
									<div v-for="(item,index) in timeLength" :key='index'>
										<span>开始{{index+1}}：</span>
										<el-time-picker is-range v-model="valueTime[index]" range-separator="至"
											value-format="HH:mm:ss" format="HH:mm:ss" start-placeholder="开始时间"
											end-placeholder="结束时间" placeholder="选择时间范围" @change='changeTime(index)'>
										</el-time-picker>
									</div>
								</div>
							</div>
						</div>
						<div class="programTitle">{{showMsg}}</div>
						<div v-show="!isprogramTitle">
							<div class="selectList" v-for="(itemd,index0) in addList" v-show="textIndex==index0"
								:key='index0'>
								<!-- 分区宽高，分区XY -->
								<div v-for="(item,index) in countArr" :key='index' class="dan">
									<span>{{item.title}}：</span>
									<el-input-number v-model="item.num[index0]" controls-position="right"
										@change="handleChange(index0,index)" :min="item.min[index0]"
										:max="item.max[index0]" :step='item.steps'></el-input-number>
								</div>
								<!-- 进入方式，字体颜色，字体大小 -->
								<div v-for="(item,index1) in entryMode" :key='index1+10' class="dan"
									v-show='itemd.areaType==1||item.title=="进入方式"||itemd.areaType==6||itemd.areaType==5'>
									<span>{{item.title}}：</span>
									<el-select v-model="value[index0][index1]" :placeholder="item.title" :disabled='item.title=="字体颜色"&&isColorSearch[index0]'>
										<el-option v-for="(items,index2) in item.options" :key="index2+20"
											:label="items.configName" :value="items.configNum"
											@click.native="selectChange(index1,index2)">
										</el-option>
									</el-select>
								</div>
								<!-- <div v-show='itemd.areaType==1' class="dan">
									<span>炫彩效果：</span>
									<el-select v-model="personasValue[index0]">
										<el-option v-for="(it,ind) in personasArr" :key="it.title"
											:label="it.title" :value="it.value" style='height:70px;display: flex;padding: 3px 0;align-items: center;'
											@click.native="personasChange(index0)">
											<span style="margin-left: 10px;">{{it.title}}</span>
											<img :src="it.url" alt="" style="margin-left: 30px;">
										</el-option>
									</el-select>
								</div> -->
								<!-- 时间分区 -->
								<div class="textareaBox textareaBox2" v-show="itemd.isStatus==3" style="border: 1px solid red;padding: 10px;">
									<div v-if="itemd.isStatus==3">
										<el-checkbox v-for="(itemm,indexm) in editTimeArr" :key='indexm' v-model="checkDate[index0][indexm]" @change='dateTimeChange(index0,indexm)' style='border: 1px solid gray; border-radius: 5px;padding: 2px 10px;'>
											<el-select v-model="valueCheck[index0][indexm]" :disabled ='!checkDate[index0][indexm]' placeholder="请选择" 
												 @click.native.prevent="preventSuffix">
												<el-option v-for="(itemq,indexq) in itemm.options" :key="itemq.id"
												:label="itemq.text" :value="itemq.text" @click.native="setTimeChange(index0,indexm,indexq)">
												</el-option>
											</el-select>
										</el-checkbox>
									</div>
									
									<div class="editTimeBox" contenteditable="true" ref='editableRef'
										@click="getEditValue"  @input="editBoxFoucs" @keydown="isEnterkey">
									</div>
								</div>
								<!-- 输入内容区 -->
								<div class="textareaBox" v-show="itemd.isStatus==1" >
									<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="msg[textIndex]"
										@input="getTextLength" ref='inputs' maxlength="1000" show-word-limit>
									</el-input>
								</div>
								<!-- 上传图片区 -->
								<div class="textareaBox textareaBox2" v-show="itemd.isStatus==2"
									style="text-align: left;border: 1px solid gray; padding: 5px;">
									<div style="width: 150px;">
										<div style="margin: 5px 10px 0">
											<p>
												<el-button type="primary" @click="getMaterials(index0)">素材库选择
												</el-button>
											</p>
											<p style="margin-top: 10px;">
												本地上传
											</p>
										</div>
										<el-upload class="upload-demo" drag action="" :accept="itemd.suffix"
											:before-upload="beforePicUpload">
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
											<div class="el-upload__tip" slot="tip" v-html="itemd.txt"></div>
										</el-upload>
									</div>
									<div class="imgShow">
										<div v-for="(item,index) in dialogImageUrl[textIndex]" :key='index'
											@click="imgMsgChange(index,index0)">
											<img :src="item" alt="">
											<span class="el-icon-close" @click="deleteImg(index)"></span>
										</div>
									</div>
								</div>
								<!-- 倒计时 -->
								<div class="textareaBox textareaBox2" v-show="itemd.isStatus==4" style="border: 1px solid red;padding: 10px;text-align: left;">
									<div>
										<span>计时类型：</span>
										<el-select v-model="timingValue[index0]" placeholder="请选择" style='width: 15%;'>
										    <el-option
										      v-for="item in timingType"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										  </el-select>
										  
										  <span style="margin-left: 10px;">目标时间：</span>
										  <el-date-picker   style='width: 28%;'
										        v-model="countdownValue[index0]"
										        type="datetime"
										        placeholder="选择日期时间"
												@change='countdownChange(index0)'>
										  </el-date-picker>
										  
										   <span style="margin-left: 10px;">显示格式：</span>
										   <el-select v-model="timingValue2[index0]" placeholder="请选择" style='width: 25%;'>
										       <el-option
										         v-for="item in timingType2"
										         :key="item.value"
										         :label="item.label"
										         :value="item.value"
												 @click.native='formatChange(index0)'>
										       </el-option>
										     </el-select>
									</div>
									<div class="countdownBox" contenteditable="true" ref='countdownRef'
										 @input="countdownBoxFoucs(textIndex)" @blur="blurEdit(index0)">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!-- 素材库选择图片区 -->
		<div>
			<el-dialog title="请选择要添加的文件" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
				<div class="fileList">
					<!-- v-loading="loading" -->
					<div v-show="total > 0" style="height: 500px">
						<!-- <el-checkbox-group v-if="dialogVisible" v-model="checkedCities" @change="handleCheckedCitiesChange">
			  			<el-checkbox v-for="(item,index) in materialAddress" :label="item" :key="item.fRelativePath">
			  				<img :src="item.fRelativePath" alt="">
			  			</el-checkbox>
			  		</el-checkbox-group> -->
            <!-- 分页器 -->
            <div class="radioBox">
              <el-radio
                v-for="(item, index) in materialAddress"
                v-model="radio"
                :label="item"
                :key="item.fRelativePath"
                @change="handleCheckedCitiesChange"
              >
                <img :src="item.fRelativePath" alt="" />
              </el-radio>
            </div>

            <!-- v-show="total > 0" -->
            <pagination
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getMaterials"
            />
          </div>
          <div
            v-show="total <= 0"
            style="color: gray;font-weight: 700;text-align: center;height:50px;line-height: 50px;"
          >
            暂无数据
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getMaterialUrl">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
	import axios from "axios"
	import Cookies from 'js-cookie'
	import {
		listUser,
		getUser,
		delUser,
		addUser,
		updateUser,
		exportUser,
		resetUserPwd,
		changeUserStatus,
		importTemplate
	} from "@/api/system/user";
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		programs,
		addProgram,
		programsParm,
		programsImg,
		programsNo,
		editProgram,
		delArea,
		delImg,
		getMaterial,
		delMaterial
	} from "@/api/system/program"
	import {
		getToken
	} from "@/utils/auth";
	import {
		treeselect
	} from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	let $ = require("jquery");
	export default {
		name: "EditorProgram",
		props: ['txt', 'text', 'card','timeDon'],
		components: {
			Treeselect
		},
		data() {
			return {
				// 炫彩效果
				personasArr:[
					{title:'无炫彩效果',value:0,url:''},
					{title:'炫彩效果1',value:1,url:require('../../../../assets/image/11.gif')},
					{title:'炫彩效果2',value:2,url:require('../../../../assets/image/22.gif')},
					{title:'炫彩效果3',value:3,url:require('../../../../assets/image/33.gif')}
				],
				isColorSearch:[false,false,false],
				personasValue:[0,0,0],
				
				// 倒计时
				countdownValue:[],
				timingType:[
					{value:0,label:"倒计时"},
					{value:1,label:"正计时"},
				],
				timingValue:[0,0,0],
				timingType2:[
					{value:0,label:"SS秒"},
					{value:1,label:"DD天"},
					{value:2,label:"DD天HH时MM分SS秒"},
				],
				timingValue2:[0,0,0],
				timeIndex:-1,
				addTimeDomArr:[],
				timeDomId:['reqi','shijian','xingqi'],
				checkDate:[],
				valueCheck:[],
				valueCheck2:[],
				editTimeArr: [{
					title: '年月日',
					options: [{
						id: 0,
						text: 'YYYY年MMMM月DDDD日',
						type:'%Y年%m月%d日 '
					}, {
						id: 1,
						text: 'YY年MM月DD日',
						type:'%y年%m月%d日 '
					}, {
						id: 2,
						text: 'YYYY-MMMM-DDDD',
						type:'%Y-%m-%d '
					}, {
						id: 3,
						text: 'YY-MM-DD',
						type:'%y-%m-%d '
					}, {
						id: 4,
						text: 'YYYY/MMMM/DDDD',
						type:'%Y/%m/%d '
					}, {
						id: 5,
						text: 'YY/MM/DD',
						type:'%y/%m/%d '
					}, {
						id: 6,
						text: 'YYYY.MMMM.DDDD',
						type:'%Y.%m.%d '
					}, {
						id: 7,
						text: 'YY.MM.DD',
						type:'%y.%m.%d '
					}]
				}, {
					title: '时分秒',
					options: [{
						id: 0,
						text: 'HH时MM分SS秒',
						type:'%H时%M分%S秒 '
					}, {
						id: 1,
						text: 'HH:MM:SS',
						type:'%H:%M:%S '
					}]
				}, {
					title: '星期',
					options: [{
						id: 0,
						text: '',
						type:'星期%w '
					}]
				}],
				clearTime: [],
				isWidthHeight: false,
				voiceValue: '',
				isvoiceValue: false,
				aaaa: undefined,
				// 总条数
				total: 0,
				aStatus: false,
				bStatus: false,
				ischecked: [],
				radio: '',
				// checkedCities: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 20,
					deptId: undefined
				},
				materialArr: [],
				deptOptions: [], //设备数据
				msg: [], //文本双向绑定
				msg2: [],
				addList: [], //
				imgIndex: [-1, -1, -1],
				valueTime:[
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
					['00:00:00', '23:59:59'],
				],		
				valueDate: [],
				checked: false,
				checked2: false,
				timeLength: [1],
				fileList: [],
				materialAddress: [],
				isContentNoNull: [],
				defaNewDate: [new Date(2020, 1, 1, 0, 0), new Date(2030, 12, 31, 0, 0)],
				valueNumberOptions: [{
					value: '选项1',
					label: '1'
				}, {
					value: '选项2',
					label: '2'
				}, {
					value: '选项3',
					label: '3'
				}, {
					value: '选项4',
					label: '4'
				}, {
					value: '选项5',
					label: '5'
				}, {
					value: '选项6',
					label: '6'
				}, {
					value: '选项7',
					label: '7'
				}, {
					value: '选项8',
					label: '8'
				}],
				valueNumber: 1, //时间个数
				broadcast: '播放次数',
				broadcastNum: 1,
				btnText: '保存',
				flag: false,
				textIndex: -1, //对应下标
				isprogramTitle: true,
				showMsg: '节目信息',
				valueDayOptions: [{
					value: 1,
					label: '星期一'
				}, {
					value: 2,
					label: '星期二'
				}, {
					value: 3,
					label: '星期三'
				}, {
					value: 4,
					label: '星期四'
				}, {
					value: 5,
					label: '星期五'
				}, {
					value: 6,
					label: '星期六'
				}, {
					value: 7,
					label: '星期日'
				}],
				valueDay: [1, 2, 3, 4, 5, 6, 7],
				isTextOrImg: [true, true, true],
				input: '',
				dialogImageUrl: [],
				isImagelaiyuan: [],
				fileIds: [],
				dialogVisible: false,
				chushi: {
					width: 0,
					height: 0
				},
				btnData: [{
						title: '文本',
						text: '文本',
						isStatus: 1,
						ico: 'el-icon-document',
						areaType: 1
					}, {
						title: '图片',
						text: '图片',
						isStatus: 2,
						areaType: 2,
						ico: 'el-icon-picture-outline',
						txt: "只能上传jpg/jpeg/bmp文<br/>件，且不超过1MB",
						suffix: ".jpg,.bmp,.jpeg"
					}, {
						title: 'GIF',
						text: 'GIF',
						isStatus: 2,
						areaType: 3,
						ico: 'el-icon-picture-outline-round',
						txt: "只能上传gif文件，且不超过<br/>1MB",
						suffix: ".gif"
					},{
						title: '时间',
						text: '时间',
						isStatus:3,
						areaType:6,
						ico: 'el-icon-time',
					}
					// ,{
					// 	title: '倒计时',
					// 	text: '倒计时',
					// 	isStatus:4,
					// 	areaType:5,
					// 	ico: 'el-icon-timer',
					// }
					// ,{
					// 	title:'天气',
					// 	text:'天气',
					// 	isStatus:3,
					// 	areaType:6,
					// 	ico:'el-icon-sunny'
					// }
					
				],
				countArr: [{
					title: "分区X轴",
					num: [0, 0, 0],
					steps: 4,
					min: [0, 0, 0],
					max: []
				}, {
					title: "分区Y轴",
					num: [0, 0, 0],
					steps: 4,
					min: [0, 0, 0],
					max: []
				}, {
					title: "分区宽度",
					num: [],
					steps: 4,
					min: [4, 4, 4],
					max: []
				}, {
					title: "分区高度",
					num: [],
					steps: 4,
					min: [4, 4, 4],
					max: []
				}, {
					title: "停留时间",
					num: [1, 1, 1],
					steps: 1,
					min: [0, 0, 0],
					max: [255, 255, 255]
				}, {
					title: "进入速度",
					num: [1, 1, 1],
					steps: 1,
					min: [0, 0, 0],
					max: [255, 255, 255]
				}],
				pType: [],
				value4: undefined,
				programsNos: undefined,
				layoutId: 0,
				isPreview: false, //预览区的显示隐藏
				addProgramParm: {
					"pDays": "[1,2,3,4,5,6,7]", //时段星期
					"pNo": 0, //节目号 ok
					"pTitle": "节目标题", //节目名称 ok
					"playTime": 1, //次数或时长 ok
					"playType": 0, //播放类型 ok
					"startTime": "2012-01-01 00:00:00", //开始日期 ok`
					"voiceMessage": "", //语音文本
					"deptId": 100, //部门ID
					"description": "", //不用传
					"endTime": "2030-12-31 23:59:59", //结束日期 ok`
					"pType": 1, //节目类型 ok`
					"isPlayVoice": 0, //播放语音 ok`
					"fType": 0, //卡组类型
					"lgProgramAreaList": [],
					"lgProgramTimeList": []
				},
				lgProgramAreaList: {
					"areaHeight": 128, //分区高 ok
					"areaNo": 0, //分区号 ok
					"areaStartX": 0, //X轴  ok
					"areaStartY": 0, //y轴 ok
					"areaType": 0, //分区类型
					"areaWidth": 256, //分区宽 ok
					"lgProgramMaterialList": [
						// {
						// "fFileId": 0,//图片ID
						// // "fFileUuid":0,
						// "fontColor": 0,//字体颜色ok
						// "fontSize": 1,//字体大小ok
						// "inSpeed": 1,//进入速度ok
						// "inType": 1,//进入类型ok
						// "mMessage": "",//文本ok
						// // "mPath": "",//图片路劲
						// "stayTime": 1,//停留时间ok
						// "lgFile":{
						// 	fFileId:0,
						// 	fRelativePath:'',
						// 	fHeight:0,
						// 	fWidth:0,
						// }
						// },
					],
				},
				lgProgramMaterialList: [],
				imgFen: {
					"fFileId": 0, //图片ID
					// "fFileUuid":0,
					"fontColor": 0, //字体颜色ok
					"fontSize": 1, //字体大小ok
					"inSpeed": 1, //进入速度ok
					"inType": 1, //进入类型ok
					"mMessage": "", //文本ok
					// "mPath": "",//图片路劲
					"stayTime": 1, //停留时间ok
					// "fonteffect":0,//炫彩效果
					"lgFile": {
						fFileId: 0,
						fRelativePath: '',
						fHeight: 0,
						fWidth: 0
					}
				},
				layoutStructure: [{
					value: '选项1',
					label: '从上到下',
					id: 0
				}, {
					value: '选项2',
					label: '从左到右',
					id: 1
				}, {
					value: '选项3',
					label: '上1下2',
					id: 2
				}, {
					value: '选项4',
					label: '上2下1',
					id: 3
				}, {
					value: '选项5',
					label: '左1右2',
					id: 2
				}, {
					value: '选项6',
					label: '左2右1',
					id: 3
				}],
				entryMode: [],
				arr: [{
					title: '进入方式',
					options: [{
						styles: ['animation-name:none', 'animation-name:none',
							'animation-name:none'
						]
					}, {
						styles: ['animation-name:getLeft0', 'animation-name:getLeft1',
							'animation-name:getLeft2'
						]
					}, {
						styles: ['animation-name:getRight0', 'animation-name:getRight1',
							'animation-name:getRight2'
						]
					}, {
						styles: ['animation-name:getTop0', 'animation-name:getTop1',
							'animation-name:getTop2'
						]
					}, {
						styles: ['animation-name:getBottom0', 'animation-name:getBottom1',
							'animation-name:getBottom2'
						]
					}, {
						styles: ['animation-name:none', 'animation-name:none',
							'animation-name:none'
							// 'animation-name:getInfiniteLeft0;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteLeft1;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteLeft2;animation-iteration-count: infinite;'
						]
					}, {
						styles: ['animation-name:none', 'animation-name:none',
							'animation-name:none'
							// 'animation-name:getInfiniteRight0;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteRight1;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteRight2;animation-iteration-count: infinite;'
						]
					}, {
						styles: ['animation-name:none', 'animation-name:none',
							'animation-name:none'
							// 'animation-name:getInfiniteTop0;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteTop1;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteTop2;animation-iteration-count: infinite;'
						]
					}, {
						styles: ['animation-name:none', 'animation-name:none',
							'animation-name:none'
							// 'animation-name:getInfiniteBottom0;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteBottom1;animation-iteration-count: infinite;',
							// 'animation-name:getInfiniteBottom2;animation-iteration-count: infinite;'
						]
					}]
				}, {
					title: '颜色选择',
					options: [{
						value: '选项1',
						label: '红色',
						styles: 'color:#ff0000'
					}, {
						value: '选项4',
						label: '绿色',
						styles: 'color:#00ff00'
					}, {
						value: '选项2',
						label: '黄色',
						styles: 'color:#ffff00'
					}, {
						value: '选项3',
						label: '蓝色',
						styles: 'color:#0000ff'
					}, {
						value: '选项5',
						label: '紫色',
						styles: 'color:#ff00ff'
					}, {
						value: '选项6',
						label: '青色',
						styles: 'color:#00ffff'
					}, {
						value: '选项7',
						label: '白色',
						styles: 'color:#ffffff'
					}]
				}, {
					title: '字体大小',
					options: [{
						value: '选项2',
						label: '16*16',
						styles: 'font-size:16px;line-height: 16px;'
					}, {
						value: '选项3',
						label: '24*24',
						styles: 'font-size:24px;line-height: 24px;'
					}, {
						value: '选项4',
						label: '32*32',
						styles: 'font-size:32px;line-height: 32px;'
					}, {
						value: '选项1',
						label: '12*12',
						styles: 'font-size:12px;line-height: 12px;'
					}, {
						value: '选项6',
						label: '48*48',
						styles: 'font-size:48px;line-height: 48px;'
					}, {
						value: '选项8',
						label: '64*64',
						styles: 'font-size:64px;line-height: 64px;'
					}]
				}, {
					title: '播放速度',
					options: [{
						value: '选项1',
						label: '1',
						styles: 'animation-duration:0.5s'
					}, {
						value: '选项2',
						label: '2',
						styles: 'animation-duration:1s'
					}, {
						value: '选项3',
						label: '3',
						styles: 'animation-duration:1.5s'
					}, {
						value: '选项4',
						label: '4',
						styles: 'animation-duration:2s'
					}, {
						value: '选项5',
						label: '5',
						styles: 'animation-duration:2.5s'
					}, {
						value: '选项6',
						label: '6',
						styles: 'animation-duration:3s'
					}, {
						value: '选项7',
						label: '7',
						styles: 'animation-duration:3.5s'
					}, {
						value: '选项8',
						label: '8',
						styles: 'animation-duration:4s'
					}, {
						value: '选项9',
						label: '9',
						styles: 'animation-duration:4.5s'
					}, {
						value: '选项10',
						label: '10',
						styles: 'animation-duration:5s'
					}]
				}],
				arr2: [{
					title: '节目类型',
					styles: 'width:100px',
					options: [{
						value: '选项1',
						label: '即时节目',
						num: 0
					}, {
						value: '选项2',
						label: '固定节目',
						num: 1
					}]
				}, {
					title: '播放语音',
					styles: 'width:100px',
					options: [{
						value: '选项1',
						label: '关闭',
						num: 0
					}, {
						value: '选项2',
						label: '开启',
						num: 1
					}]
				}, {
					title: '播放类型',
					styles: 'width:100px',
					options: [{
						value: '选项1',
						label: '次数',
						num: 0
					}, {
						value: '选项2',
						label: '时间',
						num: 1
					}]
				}],
				value: [
					['静止显示', '红色', '16*16'],
					['静止显示', '红色', '16*16'],
					['静止显示', '红色', '16*16']
				],
				value2: [],
				value3: ['即时节目', '关闭', '次数'],
				styleObj: [{}, {}, {}],
				styleStr: [],
				previewStr: [],
				liStyles: [],
				ulStyle: [],
				viewWidth: 0,
				viewHeight: 0,
				liWidth: [],
				liHeight: [],
				spanWidth: [],
				spanHeight: [],
				widthArr: [],
				positionArr: [],
				xTotal: 0,
				yTotal: 0,
				widthTotal: 0,
				heightTotal: 0,
				timeArr: [],
				backLists: true,
				imgArrDel: [],
				isGif: true,
				// timeSet: [],
				timeA: [0, 1, 2],
				iscirculate: false,
				classNums:0,
				classNames:[],
				backTimeArr:[],
				timeSetInt:[],
				msg3:[],
				inputDom:[],
				position:[]
			}
		},
		methods: {
			// 炫彩设置
			personasChange(index0){
				if(this.personasValue[index0]==0){
					this.isColorSearch[index0]=false
				}else{
					this.isColorSearch[index0]=true
				}
				this.$forceUpdate();
				console.log(this.isColorSearch[index0])
			},
			// setSelectionRange(input, selectionStart, selectionEnd) {
			//  if (input.setSelectionRange) {  
			//    input.focus();  
			//    input.setSelectionRange(selectionStart, selectionEnd);  
			//  }  
			//  else if (input.createTextRange) {  
			//    var range = input.createTextRange();  
			//    range.collapse(true);  
			//    range.moveEnd('character', selectionEnd);  
			//    range.moveStart('character', selectionStart);  
			//    range.select();  
			//  }  
			// },
			// 阻止下拉框冒泡
			preventSuffix(index0,index){},
			setTimeChange(index0,indexm,indexq){
				this.$refs.editableRef[this.textIndex].focus()
				this.valueCheck2[index0][indexm]=this.editTimeArr[indexm].options[indexq].type
				this.addTimeDomArr[index0][indexm].setAttribute('value',this.valueCheck[index0][indexm])
				this.setMsgText(index0)
			},
			insertHtmlAtCaret(inp,index,index0) {
				 let sel = window.getSelection();
				 let hasRange = sel.getRangeAt && sel.rangeCount;
				 let range = sel.getRangeAt(0);
				 let that=this
				 if(hasRange){
				     range.deleteContents();
				}
				inp.setAttribute("value", this.valueCheck[index0][index]);
				inp.setAttribute("readonly", 'true');
				inp.setAttribute("id", this.timeDomId[index]+this.classNames[index0]);
				inp.setAttribute("class", this.timeDomId[index]);
				range.insertNode(inp);
				range.collapse(false);  
				this.addTimeDomArr[index0][index]=document.getElementById(this.timeDomId[index]+this.classNames[index0])
			},
			blurEdit(index0){
				this.position[index0] = window.getSelection().getRangeAt(0)
			},
			editBoxFoucs(){
				this.$forceUpdate();
				this.setMsgText(this.textIndex)
			},
			countdownBoxFoucs(index0){
				let countdownDom = document.getElementsByClassName('countdownBox')
				this.msg[index0]=''
				this.$forceUpdate();
				for(let i=0;i<countdownDom[index0].childNodes.length;i++){
					if(countdownDom[index0].childNodes[i].nodeName=='INPUT'){
						this.msg[index0]+=this.msg3[index0]
						this.inputDom[index0]=document.getElementById(countdownDom[index0].childNodes[i].id)
					}
					if(countdownDom[index0].childNodes[i].nodeName=='#text'){
						this.msg[index0]+=countdownDom[index0].childNodes[i].data
					}
					if(countdownDom[index0].childNodes[i].nodeName=='DIV'){
						this.msg[index0]+='\r\n'
						for(let j=0;j<countdownDom[index0].childNodes[i].childNodes.length;j++){
							if(countdownDom[index0].childNodes[i].childNodes[j].nodeName=='INPUT'){
								this.msg[index0]+=this.msg3[index0]
								this.inputDom[index0]=document.getElementById(countdownDom[index0].childNodes[i].id)
							}
							if(countdownDom[index0].childNodes[i].childNodes[j].nodeName=='#text'){
								this.msg[index0]+=countdownDom[index0].childNodes[i].childNodes[j].data
							}
						}
					}
				}
			},
			countdownChange(index0){
				if(this.countdownValue[index0]){
					this.countdownEdit(index0)
				}
					
			},
			formatChange(index0){
				if(this.countdownValue[index0]){
					this.countdownEdit(index0)
				}else{
					this.$message({
					  showClose: true,
					  message: '请先选择目标时间',
					  type: 'warning'
					});
				}
			},
			// 倒计时可编辑区添加input框
			countdownEdit(index0){
				if(this.timingValue[this.textIndex]==0){
					let times=new Date().getTime()
					let timeCha=this.countdownValue[this.textIndex].getTime()-times
					if(timeCha>0){
						if(this.timingValue2[this.textIndex]==0){
							let s=parseInt(timeCha/1000)
							this.msg3[this.textIndex]=s+"秒"
						}else if(this.timingValue2[this.textIndex]==1){
							let d=parseInt(timeCha/1000/60/60/24)
							this.msg3[this.textIndex]=d+"天"						
						}else{
							let s=parseInt(timeCha/1000%60)<10?'0'+parseInt(timeCha/1000%60):parseInt(timeCha/1000%60)
							let m=parseInt(timeCha/1000/60%60)<10?'0'+parseInt(timeCha/1000/60%60):parseInt(timeCha/1000/60%60)
							let h=parseInt(timeCha/1000/60/60%24)<10?'0'+parseInt(timeCha/1000/60/60%24):parseInt(timeCha/1000/60/60%24)
							let d=parseInt(timeCha/1000/60/60/24)
							this.msg3[this.textIndex]=d+"天"+h+"时"+m+"分"+s+"秒"	
						}
						// this.$refs.countdownRef[this.textIndex].focus()
						let countdownDom = document.getElementsByClassName('countdownBox')
						if(countdownDom[this.textIndex].innerHTML.indexOf('input')==-1){
							console.log(this.position[index0])
							if(this.position[index0] === undefined){
							    // 如果div没有光标，则在div内容末尾插入
							    // const div = document.getElementById('inputContent')
							    countdownDom[index0].focus()
							    const range = window.getSelection()
							    range.selectAllChildren(countdownDom[index0])
							    range.collapseToEnd()
							    this.position[index0] = window.getSelection().getRangeAt(0)
							}
							let inp = document.createElement("input");
							// let sel = window.getSelection();
							// let hasRange = sel.getRangeAt && sel.rangeCount;
							// let range = sel.getRangeAt(0);
							// if(hasRange){
							//    range.deleteContents();
							// }
							inp.setAttribute("value", this.msg3[index0]);
							inp.setAttribute("readonly", 'true');
							inp.setAttribute("id", "countdown"+this.classNames[index0]);			
							this.position[index0].insertNode(inp);
							// this.position[index0].collapse(false);
							this.inputDom[index0]=document.getElementById("countdown"+this.classNames[index0])
						}
						this.countdownBoxFoucs(index0)
						this.inputDom[index0].setAttribute('value',this.msg3[index0])
						this.$forceUpdate();
					}else{
						this.$message({
						  showClose: true,
						  message: '所选时间只能大于当前时间',
						  type: 'warning'
						});
					}
					
				}else{
					this.$message({
					  showClose: true,
					  message: '暂未开放正计时',
					  type: 'warning'
					});
				}
				
			},
			isEnterkey(e){
				if(e && e.keyCode == 8){
					let that=this
					setTimeout(function(){
						let editDom = document.getElementsByClassName('editTimeBox')
						if(editDom[that.textIndex].innerHTML.indexOf('reqi')==-1){
							that.checkDate[that.textIndex][0]=false
						}
						if(editDom[that.textIndex].innerHTML.indexOf('shijian')==-1){
							that.checkDate[that.textIndex][1]=false
						}
						if(editDom[that.textIndex].innerHTML.indexOf('xingqi')==-1){
							that.checkDate[that.textIndex][2]=false
						}
						that.$forceUpdate();
					},100)
					
					this.setMsgText(this.textIndex)
				}
			},
			// 时间分区添加时间框
			dateTimeChange(index0,index){
				this.$refs.editableRef[this.textIndex].focus()
				let editDom = document.getElementsByClassName('editTimeBox')
				let inp = document.createElement("input");
				if(this.checkDate[this.textIndex][index]){
					this.insertHtmlAtCaret(inp,index,index0)
				}else{
					editDom[this.textIndex].removeChild(this.addTimeDomArr[index0][index])
					this.addTimeDomArr[index0][index]=undefined
					this.checkDate[this.textIndex][index]=false
				}
				this.setMsgText(index0)
				
			},
			setMsgText(index0){
				let editDom = document.getElementsByClassName('editTimeBox')
				this.msg[index0]=''
				this.msg2[index0]=''
				this.$forceUpdate();
				for(let i=0;i<editDom[index0].childNodes.length;i++){
					if(editDom[index0].childNodes[i].nodeName=='INPUT'&&editDom[index0].childNodes[i].className=='reqi'){
						this.msg[index0]+=editDom[index0].childNodes[i].defaultValue
						this.msg2[index0]+=this.valueCheck2[index0][0]
						this.addTimeDomArr[index0][0]=document.getElementById(editDom[index0].childNodes[i].id)
					}
					if(editDom[index0].childNodes[i].nodeName=='INPUT'&&editDom[index0].childNodes[i].className=='shijian'){
						this.msg[index0]+=editDom[index0].childNodes[i].defaultValue
						this.msg2[index0]+=this.valueCheck2[index0][1]
						this.addTimeDomArr[index0][1]=document.getElementById(editDom[index0].childNodes[i].id)
						
					}
					if(editDom[index0].childNodes[i].nodeName=='INPUT'&&editDom[index0].childNodes[i].className=='xingqi'){
						this.msg[index0]+=editDom[index0].childNodes[i].defaultValue
						this.msg2[index0]+=this.valueCheck2[index0][2]
						this.addTimeDomArr[index0][2]=document.getElementById(editDom[index0].childNodes[i].id)
				
					}
					if(editDom[index0].childNodes[i].nodeName=='#text'){
						this.msg[index0]+=editDom[index0].childNodes[i].data
						this.msg2[index0]+=editDom[index0].childNodes[i].data
					}
					if(editDom[index0].childNodes[i].nodeName=='DIV'){
						this.msg[index0]+='\r\n'
						this.msg2[index0]+='\r\n'
						for(let j=0;j<editDom[index0].childNodes[i].childNodes.length;j++){
							if(editDom[index0].childNodes[i].childNodes[j].nodeName=='INPUT'&&editDom[index0].childNodes[i].childNodes[j].className=='reqi'){
								this.msg[index0]+=editDom[index0].childNodes[i].childNodes[j].defaultValue
								this.msg2[index0]+=this.valueCheck2[index0][0]
								this.addTimeDomArr[index0][0]=document.getElementById(editDom[index0].childNodes[i].id.childNodes[j])
							}
							if(editDom[index0].childNodes[i].childNodes[j].nodeName=='INPUT'&&editDom[index0].childNodes[i].childNodes[j].className=='shijian'){
								this.msg[index0]+=editDom[index0].childNodes[i].childNodes[j].defaultValue
								this.msg2[index0]+=this.valueCheck2[index0][1]
								this.addTimeDomArr[index0][1]=document.getElementById(editDom[index0].childNodes[i].childNodes[j].id)
							}
							if(editDom[index0].childNodes[i].childNodes[j].nodeName=='INPUT'&&editDom[index0].childNodes[i].childNodes[j].className=='xingqi'){
								this.msg[index0]+=editDom[index0].childNodes[i].childNodes[j].defaultValue
								this.msg2[index0]+=this.valueCheck2[index0][2]
								this.addTimeDomArr[index0][2]=document.getElementById(editDom[index0].childNodes[i].childNodes[j].id)
							}
							if(editDom[index0].childNodes[i].childNodes[j].nodeName=='#text'){
								this.msg[index0]+=editDom[index0].childNodes[i].childNodes[j].data
								this.msg2[index0]+=editDom[index0].childNodes[i].childNodes[j].data
							}
						}
					}
				}
			},
			timeExtend(){
				if(this.checked){
					this.addProgramParm.lgProgramTimeList=[{
						"tEnd": "23:59:59",
						"tStart": "00:00:00"
					}]
				}else{
					if(this.checked2){
						this.broadcastNum = 1
						this.addProgramParm.playTime = 1
						this.addProgramParm.isPlayVoice = 0
						this.checked2=false
					}
					this.addProgramParm.lgProgramTimeList=[]
					this.timeLength=[1]
					this.valueNumber=1
				}
			},
			isCirculate() {
				if (this.checked2) {
					this.addProgramParm.isPlayVoice = 2
					this.broadcastNum = 255
					this.addProgramParm.playTime = 255
				} else {
					this.broadcastNum = 1
					this.addProgramParm.playTime = 1
					this.addProgramParm.isPlayVoice = 0
				}
			},
			// 获取可编辑Div内容
			getEditValue() {
				// let editDom = document.getElementsByClassName('editTimeBox')
				// this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[0].mMessage=editDom[this.textIndex].innerHTML
				// console.log(editDom[this.textIndex].innerHTML)
			},
			// 获取素材库接口
			getMaterials(index) {
				this.materialArr = []
				if (this.addList[index].text == "图片") {
					if (this.dialogImageUrl[index].length < 5) {
						this.dialogVisible = true
						this.materialAddress = []
						getMaterial({
							pageNum: 1,
							pageSize: 20,
							deptId: this.$store.state.deptId
						}).then(res => {
							if (res.code == 200) {
								res.rows.forEach(item => {
									let obj = {
										fRelativePath: undefined,
										fFileId: undefined,
										fWidth: undefined,
										fHeight: undefined,
										fIsMaterial: undefined,
									}
									if (item.fType == 2) {
										obj.fRelativePath = item.fRelativePath
										obj.fFileId = item.fFileId
										obj.fWidth = item.fWidth
										obj.fHeight = item.fHeight
										obj.fIsMaterial = item.fIsMaterial
										this.materialAddress.push(obj)
										this.total = this.materialAddress.length;
									}
								})
								this.radio = ''
							}
						})
					} else {
						this.$message.error('图片最多只能添加五张!')
					}
				} else {
					if (this.dialogImageUrl[index].length < 1) {
						this.dialogVisible = true
						this.materialAddress = []
						getMaterial({
							pageNum: 1,
							pageSize: 20,
							deptId: this.$store.state.deptId
						}).then(res => {
							if (res.code == 200) {
								res.rows.forEach(item => {
									let obj = {
										fRelativePath: undefined,
										fFileId: undefined,
										fWidth: undefined,
										fHeight: undefined,
										fIsMaterial: undefined,
									}
									if (item.fType == 3) {
										obj.fRelativePath = item.fRelativePath
										obj.fFileId = item.fFileId
										obj.fWidth = item.fWidth
										obj.fHeight = item.fHeight
										obj.fIsMaterial = item.fIsMaterial
										this.materialAddress.push(obj)
										this.total = this.materialAddress.length;
									}
								})
								this.radio = ''
							}
						})
					} else {
						this.$message.error('GIF最多只能添加一张!')
					}
				}
			},
			handleCheckedCitiesChange(val) {
				this.materialArr = []

				if (val.fWidth > this.addProgramParm.lgProgramAreaList[this.textIndex].areaWidth || val.fHeight > this
					.addProgramParm.lgProgramAreaList[this.textIndex].areaHeight) {
					this.$message({
						showClose: true,
						message: '当前选择的文件宽高超过分区宽高',
						type: 'warning'
					});
					this.radio = ''
				} else if (val.fWidth <= this.addProgramParm.lgProgramAreaList[this.textIndex].areaWidth && val.fHeight <=
					this.addProgramParm.lgProgramAreaList[this.textIndex].areaHeight) {
					this.materialArr[0] = val
				}

			},
			// 获取素材库图片地址
			getMaterialUrl() {
				if (this.materialArr.length == 0) {
					this.$message({
						message: '当前没有选择素材',
						type: 'warning'
					});
				} else {
					this.dialogVisible = false
					this.materialArr.forEach((item, index) => {
						this.dialogImageUrl[this.textIndex].push(item.fRelativePath)
						this.isImagelaiyuan[this.textIndex].push(item.fIsMaterial)
						let arr = JSON.parse(JSON.stringify(this.imgFen))
						arr.lgFile.fFileId = item.fFileId
						arr.lgFile.fWidth = item.fWidth
						arr.lgFile.fHeight = item.fHeight
						arr.lgFile.fRelativePath = item.fRelativePath
						// if(this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[0].lgFile.fRelativePath==''){
						// 	this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList=[]
						// }
						this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList.push(arr)
						this.fileIds[this.textIndex].push(item.fileId)
					})
				}
			},
			//布局样式选择
			layoutChange(index) {
				this.layoutId = index;
				this.previewStr = [];
				this.isPreview = false;
				// this.countArr[0].min = [0, 0, 0]
				// this.countArr[1].min = [0, 0, 0]
				// this.countArr[2].min = [0, 0, 0]
				if (this.addList.length == 0 || this.addList.length == 1) {
					this.zoneStyle(1, 1)
				} else {
					if (this.layoutId == 0) {
						this.zoneStyle(1, this.addList.length)
					} else if (this.layoutId == 1) {
						this.zoneStyle(this.addList.length, 1)
					} else {
						this.zoneStyle(2, 2)
					}
				}
				this.sizeInit()
				this.$forceUpdate();
			},
			// 根据所选时间个数渲染时间选择
			valueNumberChange(value) {
				this.addProgramParm.lgProgramTimeList = []
				this.timeLength.length = value + 1
				for (let i = 0; i < value + 1; i++) {
					let obj = {};
					obj['tStart'] = this.valueTime[i][0]
					obj['tEnd'] = this.valueTime[i][1]
					this.addProgramParm.lgProgramTimeList.push(obj)
				}
				this.$forceUpdate();
			},
			programNoChange(indexs) {
				this.addProgramParm.pNo = indexs
			},
			// 进入方式数据接口
			msgBtn() {
				this.isprogramTitle = true;
				this.showMsg = '节目信息'
			},
			// 获取节目播放日期数据
			changeDate() {
				this.addProgramParm.startTime = this.valueDate[0] + ' 00:00:00'
				this.addProgramParm.endTime = this.valueDate[1] + ' 23:59:59'
			},
			// // 时段信息显示与隐藏
			checkBoxchange() {},
			// 获取节目播放时间数据
			changeTime(index) {
				this.addProgramParm.lgProgramTimeList[index].tStart = this.valueTime[index][0]
				this.addProgramParm.lgProgramTimeList[index].tEnd = this.valueTime[index][1]
				// this.addProgramParm.lgProgramTimeList=this.timeArr
			},
			// 获取节目播放星期数据
			valueDayChange(value) {
				this.addProgramParm.pDays = '[' + value + ']'
			},
			//删除图片
			deleteImg(index) {
				if (!this.isImagelaiyuan[this.textIndex][index] == 1) {
					this.imgArrDel.push(this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[index]
						.lgFile.fFileId)
				}
				this.dialogImageUrl[this.textIndex].splice(index, 1)
				this.isImagelaiyuan[this.textIndex].splice(index, 1)
				this.fileIds[this.textIndex].splice(index, 1)
				// this.lgProgramMaterialList[this.textIndex].splice(index,1)
				this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList.splice(index, 1)
			},
			handleChange(index, indexs) {
				if (this.layoutId == 0) {
					this.countArr[2].max[index] = this.chushi.width - this.countArr[0].num[index]
					this.countArr[0].max[index] = this.chushi.width - 4
					if (this.countArr[2].num[index] + this.countArr[0].num[index] >= this.chushi.width) {
						this.countArr[2].num[index] = this.chushi.width - this.countArr[0].num[index]
					}
					this.countArr[3].max[index] = this.chushi.height - this.countArr[1].num[index]
					this.countArr[1].max[index] = this.chushi.height - 4
					this.countArr[1].min[index] = 0
					if (this.countArr[3].num[index] + this.countArr[1].num[index] >= this.chushi.height) {
						this.countArr[3].num[index] = this.chushi.height - this.countArr[1].num[index]
					}
					// if (this.addList.length == 1) {
						// this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]
						// this.countArr[1].max[0] = this.chushi.height - 4
						// this.countArr[1].min[1] = this.widthArr[0].heights
						// if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
						// 	this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						// }
					// } else if (this.addList.length == 2) {
					// 	if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
					// 		this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
					// 	}
					// 	if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
					// 		this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
					// 	}
					// 	this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]
					// 	this.countArr[1].max[0] = this.chushi.height - 4
					// 	this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
					// 	this.countArr[1].max[1] = this.chushi.height - 4
					// 	// this.countArr[1].min[1] = this.countArr[3].num[0] + this.countArr[1].num[0]
					// } else if (this.addList.length == 3) {
					// 	if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.countArr[1].num[1]) {
					// 		this.countArr[3].num[0] = this.countArr[1].num[1] - this.countArr[1].num[0]
					// 	}
					// 	if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.countArr[1].num[2]) {
					// 		this.countArr[3].num[1] = this.countArr[1].num[2] - this.countArr[1].num[1]
					// 	}
					// 	if (this.countArr[3].num[2] + this.countArr[1].num[2] >= this.chushi.height) {
					// 		this.countArr[3].num[2] = this.chushi.height - this.countArr[1].num[2]
					// 	}
					// 	this.countArr[3].max[0] = this.countArr[1].num[1] - this.countArr[1].num[0]
					// 	this.countArr[1].max[0] = this.countArr[1].num[1] - 4

					// 	this.countArr[3].max[1] = this.countArr[1].num[2] - this.countArr[1].num[1]
					// 	this.countArr[1].max[1] = this.countArr[1].num[2] - 4
					// 	this.countArr[1].min[1] = this.countArr[3].num[0] + this.countArr[1].num[0]

					// 	this.countArr[3].max[2] = this.chushi.height - this.countArr[1].num[2]
					// 	this.countArr[1].max[2] = this.chushi.height - 4
					// 	this.countArr[1].min[2] = this.countArr[3].num[1] + this.countArr[1].num[1]
					// }
				} else if (this.layoutId == 1) {
					this.countArr[3].max[index] = this.chushi.height - this.countArr[1].num[index]
					this.countArr[1].max[index] = this.chushi.height - 4
					if (this.countArr[3].num[index] + this.countArr[1].num[index] >= this.chushi.height) {
						this.countArr[3].num[index] = this.chushi.height - this.countArr[1].num[index]
					}
					if (this.addList.length == 1) {
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.chushi.width - 4
						if (this.countArr[0].num[0] + this.countArr[2].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
					} else if (this.addList.length == 2) {
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.countArr[0].num[1]) {
							this.countArr[2].num[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						this.countArr[2].max[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.countArr[0].num[1] - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[0].min[1] = this.countArr[2].num[0] + this.countArr[0].num[0]
					} else if (this.addList.length == 3) {
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.countArr[0].num[1]) {
							this.countArr[2].num[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.countArr[0].num[2]) {
							this.countArr[2].num[1] = this.countArr[0].num[2] - this.countArr[0].num[1]
						}
						if (this.countArr[2].num[2] + this.countArr[0].num[2] >= this.chushi.width) {
							this.countArr[2].num[2] = this.chushi.width - this.countArr[0].num[2]
						}
						this.countArr[2].max[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.countArr[0].num[1] - 4

						this.countArr[2].max[1] = this.countArr[0].num[2] - this.countArr[0].num[1]
						this.countArr[0].max[1] = this.countArr[0].num[2] - 4
						this.countArr[0].min[1] = this.countArr[2].num[0] + this.countArr[0].num[0]

						this.countArr[2].max[2] = this.chushi.width - this.countArr[0].num[2]
						this.countArr[0].max[2] = this.chushi.width - 4
						this.countArr[0].min[2] = this.countArr[2].num[1] + this.countArr[0].num[1]
					}
				} else if (this.layoutId == 2) {
					if (this.addList.length == 1) {
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]
						this.countArr[1].max[0] = this.chushi.height - 4
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.chushi.width - 4
						if (this.countArr[0].num[0] + this.countArr[2].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
					} else if (this.addList.length == 2) {
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.countArr[1].num[1]) {
							this.countArr[3].num[0] = this.countArr[1].num[1] - this.countArr[1].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
							this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						this.countArr[0].max[0] = this.chushi.width - 4
						this.countArr[1].max[0] = this.countArr[1].num[1] - 4
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.countArr[1].num[1] - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[1].max[1] = this.chushi.height - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
						this.countArr[1].min[1] = this.countArr[3].num[0] + this.countArr[1].num[0]
					} else if (this.addList.length == 3) {
						let heights = 0;
						if (this.countArr[1].num[1] - this.countArr[1].num[2] >= 0) {
							heights = this.countArr[1].num[2]
						} else {
							heights = this.countArr[1].num[1]
						}
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= heights) {
							this.countArr[3].num[0] = heights - this.countArr[1].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
							this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.countArr[0].num[2]) {
							this.countArr[2].num[1] = this.countArr[0].num[2] - this.countArr[0].num[1]
						}
						if (this.countArr[3].num[2] + this.countArr[1].num[2] >= this.chushi.height) {
							this.countArr[3].num[2] = this.chushi.height - this.countArr[1].num[2]
						}
						if (this.countArr[2].num[2] + this.countArr[0].num[2] >= this.chushi.width) {
							this.countArr[2].num[2] = this.chushi.width - this.countArr[0].num[2]
						}
						this.countArr[0].max[0] = this.chushi.width - 4
						this.countArr[1].max[0] = heights - 4
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[3].max[0] = heights - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.countArr[0].num[2] - 4
						this.countArr[1].max[1] = this.chushi.height - 4
						this.countArr[2].max[1] = this.countArr[0].num[2] - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
						this.countArr[1].min[1] = this.countArr[3].num[0] + this.countArr[1].num[0]

						this.countArr[0].max[2] = this.chushi.width - 4
						this.countArr[1].max[2] = this.chushi.height - 4
						this.countArr[2].max[2] = this.chushi.width - this.countArr[0].num[2]
						this.countArr[3].max[2] = this.chushi.height - this.countArr[1].num[2]
						this.countArr[1].min[2] = this.countArr[3].num[0] + this.countArr[1].num[0]
						this.countArr[0].min[2] = this.countArr[2].num[1] + this.countArr[0].num[1]
					}
				} else if (this.layoutId == 3) {
					if (this.addList.length == 1) {
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]
						this.countArr[1].max[0] = this.chushi.height - 4
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.chushi.width - 4
						if (this.countArr[0].num[0] + this.countArr[2].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
					} else if (this.addList.length == 2) {
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
							this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.countArr[0].num[1]) {
							this.countArr[2].num[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						this.countArr[0].max[0] = this.countArr[0].num[1] - 4
						this.countArr[1].max[0] = this.chushi.height - 4
						this.countArr[2].max[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[1].max[1] = this.chushi.height - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
						this.countArr[0].min[1] = this.countArr[0].num[0] + this.countArr[2].num[0]
					} else if (this.addList.length == 3) {
						let heights = 0;
						if (this.countArr[1].num[0] + this.countArr[3].num[0] >= this.countArr[1].num[1] + this.countArr[3]
							.num[1]) {
							heights = this.countArr[1].num[0] + this.countArr[3].num[0]
						} else {
							heights = this.countArr[1].num[1] + this.countArr[3].num[1]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.countArr[0].num[1]) {
							this.countArr[2].num[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.countArr[1].num[2]) {
							this.countArr[3].num[1] = this.countArr[1].num[2] - this.countArr[1].num[1]
						}
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.countArr[1].num[2]) {
							this.countArr[3].num[0] = this.countArr[1].num[2] - this.countArr[1].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						if (this.countArr[3].num[2] + this.countArr[1].num[2] >= this.chushi.height) {
							this.countArr[3].num[2] = this.chushi.height - this.countArr[1].num[2]
						}
						if (this.countArr[2].num[2] + this.countArr[0].num[2] >= this.chushi.width) {
							this.countArr[2].num[2] = this.chushi.width - this.countArr[0].num[2]
						}
						this.countArr[0].max[0] = this.countArr[0].num[1] - 4
						this.countArr[1].max[0] = this.countArr[1].num[2] - 4
						this.countArr[2].max[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.countArr[1].num[2] - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[1].max[1] = this.countArr[1].num[2] - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.countArr[1].num[2] - this.countArr[1].num[1]
						this.countArr[0].min[1] = this.countArr[2].num[0] + this.countArr[0].num[0]

						this.countArr[0].max[2] = this.chushi.width - 4
						this.countArr[1].max[2] = this.chushi.height - 4
						this.countArr[2].max[2] = this.chushi.width - this.countArr[0].num[2]
						this.countArr[3].max[2] = this.chushi.height - this.countArr[1].num[2]
						this.countArr[1].min[2] = heights
					}
				} else if (this.layoutId == 4) {
					if (this.addList.length == 1) {
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]
						this.countArr[1].max[0] = this.chushi.height - 4
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.chushi.width - 4
						if (this.countArr[0].num[0] + this.countArr[2].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
					} else if (this.addList.length == 2) {
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
							this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.countArr[0].num[1]) {
							this.countArr[2].num[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						this.countArr[0].max[0] = this.countArr[0].num[1] - 4
						this.countArr[1].max[0] = this.chushi.height - 4
						this.countArr[2].max[0] = this.countArr[0].num[1] - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[1].max[1] = this.chushi.height - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
						this.countArr[0].min[1] = this.countArr[0].num[0] + this.countArr[2].num[0]
					} else if (this.addList.length == 3) {
						let widths = 0;
						if (this.countArr[0].num[1] - this.countArr[0].num[2] >= 0) {
							widths = this.countArr[0].num[2]
						} else {
							widths = this.countArr[0].num[1]
						}
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= widths) {
							this.countArr[2].num[0] = widths - this.countArr[0].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.countArr[1].num[2]) {
							this.countArr[3].num[1] = this.countArr[1].num[2] - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						if (this.countArr[3].num[2] + this.countArr[1].num[2] >= this.chushi.height) {
							this.countArr[3].num[2] = this.chushi.height - this.countArr[1].num[2]
						}
						if (this.countArr[2].num[2] + this.countArr[0].num[2] >= this.chushi.width) {
							this.countArr[2].num[2] = this.chushi.width - this.countArr[0].num[2]
						}
						this.countArr[0].max[0] = widths - 4
						this.countArr[1].max[0] = this.chushi.height - 4
						this.countArr[2].max[0] = widths - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[1].max[1] = this.countArr[1].num[2] - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.countArr[1].num[2] - this.countArr[1].num[1]
						this.countArr[0].min[1] = this.countArr[0].num[0] + this.countArr[2].num[0]

						this.countArr[0].max[2] = this.chushi.width - 4
						this.countArr[1].max[2] = this.chushi.height - 4
						this.countArr[2].max[2] = this.chushi.width - this.countArr[0].num[2]
						this.countArr[3].max[2] = this.chushi.height - this.countArr[1].num[2]
						this.countArr[1].min[2] = this.countArr[3].num[1] + this.countArr[1].num[1]
						this.countArr[0].min[2] = this.countArr[2].num[0] + this.countArr[0].num[0]
					}
				} else if (this.layoutId == 5) {
					if (this.addList.length == 1) {
						this.countArr[3].max[0] = this.chushi.height - this.countArr[1].num[0]
						this.countArr[1].max[0] = this.chushi.height - 4
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.chushi.height) {
							this.countArr[3].num[0] = this.chushi.height - this.countArr[1].num[0]
						}
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[0].max[0] = this.chushi.width - 4
						if (this.countArr[0].num[0] + this.countArr[2].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
					} else if (this.addList.length == 2) {
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.chushi.width) {
							this.countArr[2].num[0] = this.chushi.width - this.countArr[0].num[0]
						}
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.countArr[1].num[1]) {
							this.countArr[3].num[0] = this.countArr[1].num[1] - this.countArr[1].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
							this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.chushi.width) {
							this.countArr[2].num[1] = this.chushi.width - this.countArr[0].num[1]
						}
						this.countArr[0].max[0] = this.chushi.width - 4
						this.countArr[1].max[0] = this.countArr[1].num[1] - 4
						this.countArr[2].max[0] = this.chushi.width - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.countArr[1].num[1] - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.chushi.width - 4
						this.countArr[1].max[1] = this.chushi.height - 4
						this.countArr[2].max[1] = this.chushi.width - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
						this.countArr[1].min[1] = this.countArr[1].num[0] + this.countArr[3].num[0]
					} else if (this.addList.length == 3) {
						let widths = 0;
						if (this.countArr[0].num[0] + this.countArr[2].num[0] >= this.countArr[0].num[1] + this.countArr[2]
							.num[1]) {
							widths = this.countArr[0].num[0] + this.countArr[2].num[0]
						} else {
							widths = this.countArr[0].num[1] + this.countArr[2].num[1]
						}
						if (this.countArr[2].num[0] + this.countArr[0].num[0] >= this.countArr[0].num[2]) {
							this.countArr[2].num[0] = this.countArr[0].num[2] - this.countArr[0].num[0]
						}
						if (this.countArr[3].num[0] + this.countArr[1].num[0] >= this.countArr[1].num[1]) {
							this.countArr[3].num[0] = this.countArr[1].num[1] - this.countArr[1].num[0]
						}
						if (this.countArr[3].num[1] + this.countArr[1].num[1] >= this.chushi.height) {
							this.countArr[3].num[1] = this.chushi.height - this.countArr[1].num[1]
						}
						if (this.countArr[2].num[1] + this.countArr[0].num[1] >= this.countArr[0].num[2]) {
							this.countArr[2].num[1] = this.countArr[0].num[2] - this.countArr[0].num[1]
						}
						if (this.countArr[3].num[2] + this.countArr[1].num[2] >= this.chushi.height) {
							this.countArr[3].num[2] = this.chushi.height - this.countArr[1].num[2]
						}
						if (this.countArr[2].num[2] + this.countArr[0].num[2] >= this.chushi.width) {
							this.countArr[2].num[2] = this.chushi.width - this.countArr[0].num[2]
						}
						this.countArr[0].max[0] = this.countArr[0].num[2] - 4
						this.countArr[1].max[0] = this.countArr[1].num[1] - 4
						this.countArr[2].max[0] = this.countArr[0].num[2] - this.countArr[0].num[0]
						this.countArr[3].max[0] = this.countArr[1].num[1] - this.countArr[1].num[0]

						this.countArr[0].max[1] = this.countArr[0].num[2] - 4
						this.countArr[1].max[1] = this.chushi.height - 4
						this.countArr[2].max[1] = this.countArr[0].num[2] - this.countArr[0].num[1]
						this.countArr[3].max[1] = this.chushi.height - this.countArr[1].num[1]
						this.countArr[1].min[1] = this.countArr[1].num[0] + this.countArr[3].num[0]

						this.countArr[0].max[2] = this.chushi.width - 4
						this.countArr[1].max[2] = this.chushi.height - 4
						this.countArr[2].max[2] = this.chushi.width - this.countArr[0].num[2]
						this.countArr[3].max[2] = this.chushi.height - this.countArr[1].num[2]
						this.countArr[0].min[2] = widths
					}
				}
				this.liStyles[index] = []
				this.liStyles[index] = 'left:' + this.countArr[0].num[index] + 'px;top:' + this.countArr[1].num[index] +
					'px;width:' +
					this.countArr[2].num[index] + 'px;height:' + this.countArr[3].num[index] + 'px'
				this.hangdChangeVau();
				this.getDom()
				this.$forceUpdate();
			},

			// 宽高参数初始化
			sizeInit() {
				for (let i = 0; i < this.widthArr.length; i++) {
					this.countArr[2].num[i] = this.widthArr[i].widths
					this.countArr[3].num[i] = this.widthArr[i].heights
					this.countArr[2].max[i] = this.widthArr[i].widths
					this.countArr[3].max[i] = this.widthArr[i].heights
				}
				if (this.layoutId == 0) {
					// this.countArr[1].min[1] = this.widthArr[0].heights
					// this.countArr[1].min[2] = this.widthArr[0].heights * 2
				} else if (this.layoutId == 1) {
					this.countArr[0].min[1] = this.widthArr[0].widths
					this.countArr[0].min[2] = this.widthArr[0].widths * 2
				} else if (this.layoutId == 2) {
					this.countArr[1].min[1] = this.widthArr[0].heights
					this.countArr[1].min[2] = this.widthArr[0].heights
					this.countArr[0].min[2] = this.widthArr[1].widths
				} else if (this.layoutId == 3) {
					this.countArr[0].min[1] = this.widthArr[0].widths
					this.countArr[1].min[2] = this.widthArr[0].heights
				} else if (this.layoutId == 4) {
					this.countArr[0].min[1] = this.widthArr[0].widths
					this.countArr[1].min[2] = this.widthArr[1].heights
					this.countArr[0].min[2] = this.widthArr[0].widths
				} else if (this.layoutId == 5) {
					this.countArr[1].min[1] = this.widthArr[0].heights
					this.countArr[0].min[2] = this.widthArr[0].widths
				}
				for (let z = 0; z < this.positionArr.length; z++) {
					this.countArr[0].num[z] = this.positionArr[z].lefts
					this.countArr[1].num[z] = this.positionArr[z].tops
				}
			},
			// 参数赋值
			hangdChangeVau() {
				for (let i = 0; i < this.addProgramParm.lgProgramAreaList.length; i++) {
					this.addProgramParm.lgProgramAreaList[i].areaStartX = this.countArr[0].num[i]
					this.addProgramParm.lgProgramAreaList[i].areaStartY = this.countArr[1].num[i]
					this.addProgramParm.lgProgramAreaList[i].areaWidth = this.countArr[2].num[i]
					this.addProgramParm.lgProgramAreaList[i].areaHeight = this.countArr[3].num[i]
					if (this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList.length == 1) {
						this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].stayTime = this.countArr[4].num[
							i]
						this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].inSpeed = this.countArr[5].num[i]
					} else {
						for (let j = 0; j < this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList.length; j++) {
							this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[j].stayTime = this.countArr[4]
								.num[i]
							this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[j].inSpeed = this.countArr[5]
								.num[i]
						}
					}
				}
			},
			handleChange2(value) {
				console.log(100)
				this.addProgramParm.playTime = value
			},
			beforePicUpload(file) {
				if (this.addList[this.textIndex].text == "图片") {
					if (this.dialogImageUrl[this.textIndex].length < 5) {
						const isLt1M = file.size / 1024 / 1024 < 1
						if (!isLt1M) {
							this.$message.error('上传图片大小不能超过 1MB!')
							return false
						}
						// 宽高限制
						let width = this.widthArr[this.textIndex].widths
						let height = this.widthArr[this.textIndex].heights
						let imgWidht = 0
						let imgHeight = 0
						const isSize = new Promise(function(resolve, reject) {
							let _URL = window.URL || window.webkitURL;
							let img = new Image();
							img.onload = function() {
								let valid = img.width <= width && img.height <= height;
								imgWidht = img.width
								imgHeight = img.height
								valid ? resolve() : reject();
							}
							img.src = _URL.createObjectURL(file);
						}).then(() => {
							//图片接口
							programsImg([file], this.$store.state.deptId, 0, imgWidht, imgHeight).then(res => {
								if (res.code == 200) {
									let arr = JSON.parse(JSON.stringify(this.imgFen))
									arr.lgFile.fRelativePath = res.url
									arr.lgFile.fFileId = res.fileId
									arr.lgFile.fWidht = imgWidht
									arr.lgFile.fHeight = imgHeight
									this.dialogImageUrl[this.textIndex].push(res.url)
									this.isImagelaiyuan[this.textIndex].push(0)
									this.fileIds[this.textIndex].push(res.fileId)
									this.addProgramParm.lgProgramAreaList[this.textIndex]
										.lgProgramMaterialList.push(arr)
									this.$message.success(res.msg)
								} else {
									this.$message.error(res.msg)
								}
							})
						}, () => {
							this.$message.error('图片尺寸只能是在' + width + '*' + height + '之内!请重新选择!')
							return false; //必须加上return false; 才能阻止
						})
						return false
					} else {
						this.$message.error('图片文件最多只能添加五张!')
						return false
					}
				} else {
					if (this.dialogImageUrl[this.textIndex].length < 1) {
						const isLt1M = file.size / 1024 / 1024 < 1
						if (!isLt1M) {
							this.$message.error('上传GIF大小不能超过 1MB!')
							return false
						}
						// 宽高限制
						let width = this.widthArr[this.textIndex].widths
						let height = this.widthArr[this.textIndex].heights
						let imgWidht = 0
						let imgHeight = 0
						const isSize = new Promise(function(resolve, reject) {
							let _URL = window.URL || window.webkitURL;
							let img = new Image();
							img.onload = function() {
								let valid = img.width <= width && img.height <= height;
								imgWidht = img.width
								imgHeight = img.height
								valid ? resolve() : reject();
							}
							img.src = _URL.createObjectURL(file);
						}).then(() => {
							//图片接口
							programsImg([file], this.$store.state.deptId, 0, imgWidht, imgHeight).then(res => {
								if (res.code == 200) {
									let arr = JSON.parse(JSON.stringify(this.imgFen))
									arr.lgFile.fRelativePath = res.url
									arr.lgFile.fFileId = res.fileId
									arr.lgFile.fWidht = imgWidht
									arr.lgFile.fHeight = imgHeight
									this.dialogImageUrl[this.textIndex].push(res.url)
									this.isImagelaiyuan[this.textIndex].push(0)
									this.fileIds[this.textIndex].push(res.fileId)
									this.addProgramParm.lgProgramAreaList[this.textIndex]
										.lgProgramMaterialList.push(arr)
									this.$message.success(res.msg)
								} else {
									this.$message.error(res.msg)
								}
							})
						}, () => {
							this.$message.error('GIF尺寸只能是在' + width + '*' + height + '之内!请重新选择!')
							return false; //必须加上return false; 才能阻止
						})
						return false
					} else {
						this.$message.error('GIF文件最多只能添加一个!')
						return false
					}
				}

			},
			// 点击图片获取参数
			imgMsgChange(index, index0) {
				this.imgIndex[index0] = index
				this.$forceUpdate();
			},
			// 自适应分区宽高
			zoneStyle(x, y) {
				let xWidth = Math.floor(this.viewWidth / x);
				let yHeight = Math.floor(this.viewHeight / y)
				let style = "width:" + xWidth + "px;height:" + yHeight + "px";
				let style2 = "width:" + xWidth + "px;height:" + this.viewHeight + "px";
				let style3 = "width:" + this.viewWidth + "px;height:" + yHeight + "px";
				let style4 = "width:" + this.viewWidth / 2 + "px;height:" + this.viewHeight + "px";
				if (this.layoutId == 0) {
					this.liStyles[0] = style
					this.positionArr[0] = {
						lefts: 0,
						tops: 0
					}
					this.positionArr[1] = {
						lefts: 0,
						tops: yHeight
					}
					this.positionArr[2] = {
						lefts: 0,
						tops: yHeight * 2
					}
					this.liStyles[1] = style + ";left:0;top:" + yHeight + 'px'
					this.liStyles[2] = style + ";left:0;top:" + yHeight * 2 + 'px'
					for (let i = 0; i < this.addList.length; i++) {
						this.widthArr[i] = {
							widths: xWidth,
							heights: yHeight
						}
					}
				} else if (this.layoutId == 1) {
					this.positionArr[0] = {
						lefts: 0,
						tops: 0
					}
					this.positionArr[1] = {
						lefts: xWidth,
						tops: 0
					}
					this.positionArr[2] = {
						lefts: xWidth * 2,
						tops: 0
					}
					this.liStyles[0] = style
					this.liStyles[1] = style + ";left:" + xWidth + "px;top:0;"
					this.liStyles[2] = style + ";left:" + xWidth * 2 + "px;top:0;"
					for (let i = 0; i < this.addList.length; i++) {
						this.widthArr[i] = {
							widths: xWidth,
							heights: yHeight
						}
					}
				} else if (this.layoutId == 2) {
					this.positionArr[0] = {
						lefts: 0,
						tops: 0
					}
					this.positionArr[1] = {
						lefts: 0,
						tops: yHeight
					}
					this.positionArr[2] = {
						lefts: xWidth,
						tops: yHeight
					}
					this.liStyles[0] = style3
					this.liStyles[1] = style + ";left:0;top:" + yHeight + 'px;'
					this.liStyles[2] = style + ";left:" + xWidth + "px;top:" + yHeight + 'px';
					this.widthArr[0] = {
						widths: this.viewWidth,
						heights: yHeight
					}
					this.widthArr[1] = {
						widths: xWidth,
						heights: yHeight
					}
					this.widthArr[2] = {
						widths: xWidth,
						heights: yHeight
					}
				} else if (this.layoutId == 3) {
					this.positionArr[0] = {
						lefts: 0,
						tops: 0
					}
					this.positionArr[1] = {
						lefts: xWidth,
						tops: 0
					}
					this.positionArr[2] = {
						lefts: 0,
						tops: yHeight
					}
					this.liStyles[0] = style
					this.liStyles[1] = style + ";left:" + xWidth + "px;top:0;"
					this.liStyles[2] = style3 + ";left:0;top:" + yHeight + 'px';
					this.widthArr[0] = {
						widths: xWidth,
						heights: yHeight
					}
					this.widthArr[1] = {
						widths: xWidth,
						heights: yHeight
					}
					this.widthArr[2] = {
						widths: this.viewWidth,
						heights: yHeight
					}
				} else if (this.layoutId == 4) {
					this.positionArr[0] = {
						lefts: 0,
						tops: 0
					}
					this.positionArr[1] = {
						lefts: xWidth,
						tops: 0
					}
					this.positionArr[2] = {
						lefts: xWidth,
						tops: yHeight
					}
					this.liStyles[0] = style2
					this.liStyles[1] = style + ";left:" + xWidth + "px;top:0;"
					this.liStyles[2] = style + ";left:" + xWidth + "px;top:" + yHeight + 'px';
					this.widthArr[0] = {
						widths: xWidth,
						heights: this.viewHeight
					}
					this.widthArr[1] = {
						widths: xWidth,
						heights: yHeight
					}
					this.widthArr[2] = {
						widths: xWidth,
						heights: yHeight
					}
				} else if (this.layoutId == 5) {
					this.positionArr[0] = {
						lefts: 0,
						tops: 0
					}
					this.positionArr[1] = {
						lefts: 0,
						tops: yHeight
					}
					this.positionArr[2] = {
						lefts: xWidth,
						tops: 0
					}
					this.liStyles[0] = style
					this.liStyles[1] = style + ";left:0;top:" + yHeight + 'px;'
					this.liStyles[2] = style2 + ";left:" + xWidth + "px;top:0";
					this.widthArr[0] = {
						widths: xWidth,
						heights: yHeight
					}
					this.widthArr[1] = {
						widths: xWidth,
						heights: yHeight
					}
					this.widthArr[2] = {
						widths: xWidth,
						heights: this.viewHeight
					}
				}
				this.$forceUpdate();
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			// 添加文本或图片分区列表
			zoneList(a, b, c) {
				this.isprogramTitle = false;
				this.showMsg = '分区信息';
				let arr4 = JSON.parse(JSON.stringify(this.lgProgramAreaList))
				if (this.addList.length < 3) {
					if (this.isGif || a != 2) {
						this.textIndex++
						this.classNums++
						this.classNames.push(this.classNums)
						this.dialogImageUrl.push([])
						this.isImagelaiyuan.push([])
						this.fileIds.push([])
						this.lgProgramMaterialList.push([])
						this.addList.push(this.btnData[a]);
						this.addTimeDomArr.push([this.classNums,this.classNums,this.classNums])
						this.valueCheck.push([undefined,undefined,undefined])
						this.valueCheck2.push([undefined,undefined,undefined])
						this.checkDate.push([false,false,false])
						this.clearTime.push([])
						this.addProgramParm.lgProgramAreaList.push(arr4)
						this.pType.push(this.btnData[a].areaType)
						if (a == 0 || a == 3 || a == 4 ) {
							let arr = JSON.parse(JSON.stringify(this.imgFen))
							this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList.push(arr)
						}
						for (let i = 0; i < this.addList.length; i++) {
							this.addProgramParm.lgProgramAreaList[i].areaNo = i;
							this.addProgramParm.lgProgramAreaList[i].areaType = this.pType[i]
						}
						if (a == 2) {
							this.isGif = false
						}
						this.zoneStyle(b, c)
						this.sizeInit()
						this.$forceUpdate();
					} else {
						this.$message({
							showClose: true,
							message: '只能添加一个GIF分区',
							type: 'warning'
						});
					}

				} else {
					this.$message({
						showClose: true,
						message: '最多只能添加三个分区',
						type: 'warning'
					});
					return
				}
				this.hangdChangeVau();
				this.getDom()
			},
			// 根据所选布局添加
			addText(index) {
				if (this.layoutId == 0) {
					this.zoneList(index, 1, this.addList.length + 1)
				} else if (this.layoutId == 1) {
					this.zoneList(index, this.addList.length + 1, 1)
				} else {
					this.zoneList(index, 2, 2)
				}
				if (index == 3) {
					this.getTime(this.textIndex)
				}
				this.hangdChangeVau();
				this.previewStr = [];
				this.isPreview = false;
				this.getDom();
			},
			getTime(i){
				const now = new Date()
				const date = {
					year: now.getFullYear(), // 获取完整的年份 2019
					month: now.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					date: now.getDate(), //获取当前日(1-31)
					day: now.getDay(), //获取当前星期X(0-6,0代表星期天)
					hours: now.getHours(), //获取当前小时数(0-23)
					min: now.getMinutes(), //获取当前分钟数(0-59)
					sec: now.getSeconds(), //获取当前秒数(0-59)
				}
				const newmonth = date.month >= 10 ? date.month : '0' + date.month
				const newdate = date.date >= 10 ? date.date : '0' + date.date
				const newhours = date.hours >= 10 ? date.hours : '0' + date.hours
				const newmin = date.min >= 10 ? date.min : '0' + date.min
				const newsec = date.sec >= 10 ? date.sec : '0' + date.sec
				let newday = date.day
				let dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (let i = 0; i < 7; i++) {
					if (date.day == i) {
						newday = dayCycleArray[i];
					}
				}
				let bianYear = date.year - 2000
				this.editTimeArr[0].options[0].text = date.year + '年' + newmonth + '月' + newdate + '日 '
				this.editTimeArr[0].options[1].text = bianYear + '年' + newmonth + '月' + newdate + '日 '
				this.editTimeArr[0].options[2].text = date.year + '-' + newmonth + '-' + newdate+' '
				this.editTimeArr[0].options[3].text = bianYear + '-' + newmonth + '-' + newdate+' '
				this.editTimeArr[0].options[4].text = date.year + '/' + newmonth + '/' + newdate+' '
				this.editTimeArr[0].options[5].text = bianYear + '/' + newmonth + '/' + newdate+' '
				this.editTimeArr[0].options[6].text = date.year + '.' + newmonth + '.' + newdate+' '
				this.editTimeArr[0].options[7].text = bianYear + '.' + newmonth + '.' + newdate+' '
				this.editTimeArr[1].options[0].text = newhours + '时' + newmin + '分' + newsec + '秒 '
				this.editTimeArr[1].options[1].text = newhours + ':' + newmin + ':' + newsec+' '
				this.editTimeArr[2].options[0].text = '星期' + newday+' '
				this.valueCheck[i][0] = this.editTimeArr[0].options[0].text
				this.valueCheck[i][1] = this.editTimeArr[1].options[0].text
				this.valueCheck[i][2] = this.editTimeArr[2].options[0].text
				this.valueCheck2[i][0] = this.editTimeArr[0].options[0].type
				this.valueCheck2[i][1] = this.editTimeArr[1].options[0].type
				this.valueCheck2[i][2] = this.editTimeArr[2].options[0].type
				this.$forceUpdate();
			},
			//绑定文本编辑
			checkList(index) {
				this.textIndex = index;
				this.previewStr = [];
				this.isPreview = false;
				this.isprogramTitle = false;
				this.showMsg = '分区信息';
				let inputsMessage = this.$refs.inputs;
				let that = this;
				setTimeout(function() {
					inputsMessage[that.textIndex].focus()
				}, 100)
			},
			// 添加css样式
			getAnimation() {
				for (let i in this.styleObj[this.textIndex]) {
					this.styleStr[this.textIndex] += this.styleObj[this.textIndex][i]
				}
			},
			// 点击预览
			previewDome() {
				this.isPreview = !this.isPreview;
				this.previewStr = this.styleStr;
				this.$forceUpdate();
			},
			// 返回按钮
			backList() {
				this.$emit('changeBack', this.backLists)
			},
			// 动画事件定时器
			animateTime(index, indexs, speed, times) {
				console.log(index, speed, times)
				let that = this

				if (this.textIndex == 0) {
					clearInterval(this.timeSet[0].timer)
					if (indexs == 5) {
						this.timeSet[0].timer = setInterval(function() {
							$($('.spanBox')[0]).css('left', that.liWidth[0] + 'px')
							$($('.spanBox')[0]).animate({
								left: 0
							}, speed * 1000)
							console.log(111)
						}, (speed + times) * 1000)
					}
				} else if (this.textIndex == 1) {
					clearInterval(this.timeSet[1].timer)
					if (indexs == 5) {
						this.timeSet[1].timer = setInterval(function() {
							$($('.spanBox')[1]).css('left', that.liWidth[1] + 'px')
							$($('.spanBox')[1]).animate({
								left: 0
							}, speed * 1000)
							console.log(222)
						}, (speed + times) * 1000)
					}
				} else {
					clearInterval(this.timeSet[2].timer)
					if (indexs == 5) {
						this.timeSet[2].timer = setInterval(function() {
							$($('.spanBox')[2]).css('left', that.liWidth[2] + 'px')
							$($('.spanBox')[2]).animate({
								left: 0
							}, speed * 1000)
							console.log(333)
						}, (speed + times) * 1000)
					}
				}
				console.log(this.timeSet)
			},
			// 动态获取css动画样式
			getSty() {
				let that = this
				setTimeout(function() {
					that.$refs.chanimate.style.setProperty("--spanWidth" + that.textIndex, '-' + that.spanWidth[
						that.textIndex] + 'px')
					that.$refs.chanimate.style.setProperty("--spanHeighth" + that.textIndex, '-' + that.spanHeight[
						that.textIndex] + 'px')
					that.$refs.chanimate.style.setProperty("--viewRight" + that.textIndex, that.liWidth[that
						.textIndex] - 2 - that.spanWidth[that.textIndex] + 'px')
					that.$refs.chanimate.style.setProperty("--viewBottom" + that.textIndex, that.liHeight[that
						.textIndex] - 2 - that.spanHeight[that.textIndex] + 'px')
					that.$refs.chanimate.style.setProperty("--liWidth" + that.textIndex, that.liWidth[that
						.textIndex] + 'px')
					that.$refs.chanimate.style.setProperty("--liHeight" + that.textIndex, that.liHeight[that
						.textIndex] + 'px')
					that.$refs.chanimate.style.setProperty("--inSeep" + that.textIndex, that.countArr[5].num[that
						.textIndex] + 's')
				})
			},
			// 节目信息数据
			programChange(index, indexs) {
				if (index == 0) {
					this.addProgramParm.pType = this.arr2[0].options[indexs].num;
				} else if (index == 1) {
					this.addProgramParm.isPlayVoice = this.arr2[1].options[indexs].num;
					if (indexs == 0) {
						this.isvoiceValue = false
						this.voiceValue = ''
					} else {
						this.isvoiceValue = true
					}
				} else if (index == 2) {
					this.addProgramParm.playType = this.arr2[2].options[indexs].num;
					if (this.arr2[2].options[indexs].num == 0) {
						this.broadcast = '播放次数'
					} else {
						this.broadcast = '播放时长'
					}
				}
			},
			//选择添加样式  获取进入方式，字体颜色，字体大小参数
			selectChange(index, indexs) {
				this.getDom();
				this.previewStr = [];
				this.isPreview = false;
				this.styleStr[this.textIndex] = '';
				if (this.arr[index].title == "进入方式") {
					this.styleObj[this.textIndex]['changes' + index] = this.arr[index].options[indexs].styles[this
						.textIndex] + ';max-width:' + this.liWidth[this.textIndex] + 'px;';
				} else {
					this.styleObj[this.textIndex]['changes' + index] = this.arr[index].options[indexs].styles + ';';
				}
				if (index == 0) {
					// clearInterval(this.timeSet[this.textIndex].timer)
					if (indexs == 1 || indexs == 5) {
						let obj = {
							width: this.spanWidth[this.textIndex] + ';'
						}
						this.styleObj[this.textIndex].changes0 = this.styleObj[this.textIndex].changes0 + 'width:' + this
							.spanWidth[this.textIndex] + 'px;'
							console.log(this.styleObj[this.textIndex].changes0)
					}
					// if (indexs > 4) {
					// 	this.animateTime(index, indexs, this.countArr[5].num[this.textIndex], this.countArr[4].num[this
					// 		.textIndex])
					// }
					if (this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList.length == 1) {
						this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[0].inType = this
							.entryMode[0].options[indexs].configNum
					} else {
						for (let j = 0; j < this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList
							.length; j++) {
							this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[j].inType = this
								.entryMode[0].options[indexs].configNum
						}
					}
				} else if (index == 1) {
					console.log(this.addProgramParm)
					this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[0].fontColor = this
						.entryMode[1].options[indexs].configNum
				} else if (index == 2) {
					this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[0].fontSize = this
						.entryMode[2].options[indexs].configNum
				}
				this.getAnimation();
				this.$forceUpdate();
				this.getSty();
			},
			// 动态获取屏与文本宽高
			getDom() {
				let spanDom = document.getElementsByClassName('spanBox');
				let liDom = document.getElementsByClassName('viewLiDom');
				let that = this
				setTimeout(function() {
					that.spanWidth[that.textIndex] = spanDom[that.textIndex].offsetWidth;
					that.spanHeight[that.textIndex] = spanDom[that.textIndex].offsetHeight;
					that.liWidth[that.textIndex] = liDom[that.textIndex].offsetWidth;
					that.liHeight[that.textIndex] = liDom[that.textIndex].offsetHeight;
				})
			},
			// 删除分区
			deteleZone(index) {
				if (this.addList[index].areaType == 3) {
					this.isGif = true
				}
				if(this.addList.length==2){
					if(this.addList[0].areaType==6&this.addList[1].areaType==6){
						let editDom = document.getElementsByClassName('editTimeBox')
						if(index==0){
							editDom[index].innerHTML=editDom[index+1].innerHTML
						}
					}
					if(this.addList[0].areaType==5&this.addList[1].areaType==5){
						let countdownDom = document.getElementsByClassName('countdownBox')
						if(index==0){
							countdownDom[index].innerHTML=countdownDom[index+1].innerHTML
						}
					}
					
				}
				if(this.addList.length==3){
					if(this.addList[0].areaType==6&this.addList[1].areaType==6&this.addList[2].areaType!=6){
						let editDom = document.getElementsByClassName('editTimeBox')
						if(index==0){
							editDom[index].innerHTML=editDom[index+1].innerHTML
						}
					}
					if(this.addList[0].areaType!=6&this.addList[1].areaType==6&this.addList[2].areaType==6){
						let editDom = document.getElementsByClassName('editTimeBox')
						if(index==0){
							editDom[index].innerHTML=editDom[index+1].innerHTML
							editDom[index+1].innerHTML=editDom[index+2].innerHTML
						}
						if(index==1){
							editDom[index].innerHTML=editDom[index+1].innerHTML
						}
					}
					if(this.addList[0].areaType==6&this.addList[1].areaType==6&this.addList[2].areaType==6){
						let editDom = document.getElementsByClassName('editTimeBox')
						if(index==0){
							editDom[index].innerHTML=editDom[index+1].innerHTML
							editDom[index+1].innerHTML=editDom[index+2].innerHTML
						}
						if(index==1){
							editDom[index].innerHTML=editDom[index+1].innerHTML
						}
					}
					
					
					if(this.addList[0].areaType==5&this.addList[1].areaType==5&this.addList[2].areaType!=5){
						let countdownDom = document.getElementsByClassName('countdownBox')
						if(index==0){
							countdownDom[index].innerHTML=countdownDom[index+1].innerHTML
						}
					}
					if(this.addList[0].areaType!=5&this.addList[1].areaType==5&this.addList[2].areaType==5){
						let countdownDom = document.getElementsByClassName('countdownBox')
						if(index==0){
							countdownDom[index].innerHTML=countdownDom[index+1].innerHTML
							countdownDom[index+1].innerHTML=countdownDom[index+2].innerHTML
						}
						if(index==1){
							countdownDom[index].innerHTML=countdownDom[index+1].innerHTML
						}
					}
					if(this.addList[0].areaType==5&this.addList[1].areaType==5&this.addList[2].areaType==5){
						let countdownDom = document.getElementsByClassName('countdownBox')
						if(index==0){
							countdownDom[index].innerHTML=countdownDom[index+1].innerHTML
							countdownDom[index+1].innerHTML=countdownDom[index+2].innerHTML
						}
						if(index==1){
							countdownDom[index].innerHTML=countdownDom[index+1].innerHTML
						}
					}
				}
				this.personasValue.splice(index,1)
				this.isColorSearch.splice(index,1)
				this.personasValue.push(0)
				this.isColorSearch.push(false)
				this.countdownValue.splice(index,1)
				this.timingValue.splice(index,1)
				this.timingValue2.splice(index,1)
				this.countdownValue.push(new Date(new Date().getTime()+24*60*60*1000))
				this.timingValue.push(0)
				this.timingValue2.push(0)
				this.value.splice(index, 1)
				this.position.splice(index, 1)
				this.value.push(['静止显示', '红色', '16*16'])
				this.previewStr = [];
				this.isPreview = false;
				this.textIndex = this.addList.length - 2
				this.addList.splice(index, 1)
				this.pType.splice(index, 1)
				this.styleStr.splice(index, 1)
				this.addProgramParm.lgProgramAreaList.splice(index, 1)
				this.styleObj[index] = {}
				this.liStyles.splice(index, 1)
				this.widthArr.splice(index, 1)
				this.msg.splice(index, 1)
				this.msg2.splice(index, 1)
				this.backTimeArr.splice(index, 1)
				this.dialogImageUrl.splice(index, 1)
				this.isImagelaiyuan.splice(index, 1)
				this.isContentNoNull.splice(index, 1)
				this.fileIds.splice(index, 1)
				this.lgProgramMaterialList.splice(index, 1)
				this.positionArr.splice(index, 1)
				this.addTimeDomArr.splice(index, 1)
				this.inputDom.splice(index, 1)
				this.msg3.splice(index,1)
				this.valueCheck.splice(index, 1)
				this.valueCheck2.splice(index, 1)
				this.checkDate.splice(index, 1)
				this.classNames.splice(index, 1)
				this.$forceUpdate();
				for (let i = 0; i < this.countArr.length; i++) {
					if (i == 0 || i == 1) {
						this.countArr[i].num[index] = 0
					} else if (i == 4 || i == 5) {
						this.countArr[i].num[index] = 1
					} else {
						this.countArr[i].num.splice(index, 1)
					}
				}
				for (let i = 0; i < this.addList.length; i++) {
					this.addProgramParm.lgProgramAreaList[i].areaNo = i;
				}
				if (this.layoutId == 0) {
					this.zoneStyle(1, this.addList.length)
				} else if (this.layoutId == 1) {
					this.zoneStyle(this.addList.length, 1)
				} else {
					this.zoneStyle(this.addList.length, this.addList.length)
				}
				if (this.textIndex == -1) {
					this.isprogramTitle = true
					this.showMsg = '节目信息'
				}
				if (this.widthArr.length > 0) {
					this.sizeInit()
				}

				this.hangdChangeVau();
				if (this.addList.length > 0) {
					this.getDom()
				} else {
					return
				}
			},
			ladd() {
				this.chushi.width = this.card.width;
				this.chushi.height = this.card.height;
				this.viewWidth = this.chushi.width;
				this.viewHeight = this.chushi.height;
				this.addProgramParm.fType = this.card.fType
				if (this.card.fType == 1 || this.card.fType == 2) {
					this.btnData = [this.btnData[0]]
				}
				for (let i = 0; i < this.countArr[0].max.length; i++) {
					this.countArr[0].max[i] = this.viewWidth
					this.countArr[1].max[i] = this.viewHeight
					this.countArr[2].max[i] = this.viewWidth
					this.countArr[3].max[i] = this.viewHeight
				}
				if (this.chushi.width <= 400 && this.chushi.height > 200) {
					this.isWidthHeight = true
				} else {
					this.isWidthHeight = false
				}
				this.ulStyle = "width:" + this.chushi.width + "px;height:" + this.chushi.height + "px"
				this.$refs.chanimate.style.setProperty("--viewWidth", this.viewWidth + 'px');
				this.$refs.chanimate.style.setProperty("--viewHeight", this.viewHeight + 'px');
			},
			// 文本value
			getTextLength() {
				this.previewStr = [];
				this.isPreview = false;
				// 移除分区内容宽度属性
				document.getElementsByClassName('spanBox')[this.textIndex].style.width = ""
				// 获取初始化宽高
				this.getDom()
				// 获取文本内容
				let reg1 = new RegExp("\n", "g") //换行
				if (this.addList[this.textIndex].isStatus == 1) {
					this.addProgramParm.lgProgramAreaList[this.textIndex].lgProgramMaterialList[0].mMessage = this.msg[this
						.textIndex].replace(reg1, "\r\n")
				}
			},
			// 节目新增和修改规则判断
			async panDuanProgram(){
				let that=this
				for (let i = 0; i < that.addProgramParm.lgProgramAreaList.length; i++) {
					if (that.addProgramParm.lgProgramAreaList[i].areaType == 1) {
						if (that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList.findIndex(target => target
								.mMessage === '') == -1) {
							that.isContentNoNull[i] = false
						} else {
							that.isContentNoNull[i] = true
						}
					} else if (that.addProgramParm.lgProgramAreaList[i].areaType == 2 || that.addProgramParm
						.lgProgramAreaList[i].areaType == 3) {
						if (that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList.length != 0) {
							if (that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList.findIndex(target =>
									target.lgFile.fRelativePath === '') == -1) {
								that.isContentNoNull[i] = false
							} else {
								that.isContentNoNull[i] = true
							}
						} else {
							that.isContentNoNull[i] = true
						}
					} else if(that.addProgramParm.lgProgramAreaList[i].areaType == 6){
						that.isContentNoNull[i] = false
					}
				}
				that.$forceUpdate();
				if (that.isContentNoNull.findIndex(target => target === true) == -1) {
					if (that.imgArrDel.length > 0) {
						delImg(that.imgArrDel)
					}
					// 判断时间不能
					for (let i = 1; i < this.addProgramParm.lgProgramTimeList.length; i++) {
						if (parseInt(this.addProgramParm.lgProgramTimeList[i].tStart.replace(/:/g, '')) <= parseInt(
								this.addProgramParm.lgProgramTimeList[
									i - 1].tEnd.replace(/:/g, ''))) {
							this.$message({
								showClose: true,
								message: '第' + (i + 1) + '个开始时间不能小于或等于第' + i + '个结束时间',
								type: 'warning'
							});
							return
						}
					}
					if (this.checked2) {
						await programs(this.addDateRange({
							deptId: this.$store.state.deptId
						}, this.dateRange)).then(
							response => {
								if (response.code == 200) {
									let data = []
									data[0] = parseInt(this.addProgramParm.startTime.substring(0, 11).replace(/-/g,''))
									data[1] = parseInt(this.addProgramParm.endTime.substring(0, 11).replace(/-/g,''))
									console.log(response.rows)
									for (let i = 0; i < response.rows.length; i++) {
										if (response.rows[i].isPlayVoice == 2) {
											let arr = []
											arr[0] = parseInt(response.rows[i].startTime.substring(0, 11).replace(/-/g, ''))
											arr[1] = parseInt(response.rows[i].endTime.substring(0, 11).replace(/-/g, ''))
											if ((data[0] >= arr[0] && data[0] <= arr[1]) || (data[1] >= arr[0] &&
													data[1] <= arr[1]) || (data[0] < arr[0] && data[1] > arr[1])) {
												console.log(response.rows[i])
												for (let j = 0; j < this.addProgramParm.lgProgramTimeList
													.length; j++) {
													let newTime = []
													newTime[0] = parseInt(this.addProgramParm.lgProgramTimeList[j]
														.tStart.replace(/:/g, ''))
													newTime[1] = parseInt(this.addProgramParm.lgProgramTimeList[j]
														.tEnd.replace(/:/g, ''))
													let oldTime = []
													oldTime[0] = parseInt(response.rows[i].lgProgramTimeList[j]
														.tStart.replace(/:/g, ''))
													oldTime[1] = parseInt(response.rows[i].lgProgramTimeList[j]
														.tEnd.replace(/:/g, ''))
													if ((newTime[0] >= oldTime[0] && newTime[0] <= oldTime[1]) || (
															newTime[1] >= oldTime[0] && newTime[1] <= oldTime[1]
															) || (newTime[0] < oldTime[0] && newTime[1] > oldTime[
															1])) {
														this.iscirculate = true
														return
													}
												}
											}
										}
				
									}
								} else {
									console.log(400)
								}
							}
						)
					}
					if (this.iscirculate) {
						this.$confirm('该部门下已有同时段的节目存在, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							if (that.text == true) {
								that.hangdChangeVau();
								let editDom = document.getElementsByClassName('editTimeBox')
								for(let i=0;i<that.addList.length;i++){
									if(that.addProgramParm.lgProgramAreaList[i].areaType==6){
										that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].mMessage=that.msg2[i]+'?|?'+editDom[i].innerHTML+'?|?'+that.msg[i]
									}
								}
								console.log(that.addProgramParm)
								editProgram(that.addProgramParm).then(
									res => {
										if (res.code == 200) {
											that.msgSuccess("修改成功");
											that.$emit('show')
										} else {
											that.$message.error(res.msg)
										}
									}
								)
							} else {
								let editDom = document.getElementsByClassName('editTimeBox')
								for(let i=0;i<that.msg2.length;i++){
									if(that.addProgramParm.lgProgramAreaList[i].areaType==6){
										that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].mMessage=that.msg2[i]+'?|?'+editDom[i].innerHTML+'?|?'+that.msg[i]
									}
								}
								that.addProgramParm.deptId = that.$store.state.deptId;
								that.addProgramParm.voiceMessage = that.voiceValue
								that.addProgramParm.pNo = that.value4
								console.log(that.addProgramParm)
								that.hangdChangeVau();
								addProgram(that.addProgramParm).then(
									res => {
										if (res.code == 200) {
											that.msgSuccess("新增成功");
											that.$emit('show')
										} else {
											that.$message.error('新增失败')
										}
									}
								)
							}
						})
					} else {
						if (that.text == true) {
							that.hangdChangeVau();
							let editDom = document.getElementsByClassName('editTimeBox')
							for(let i=0;i<that.msg2.length;i++){
								if(that.addProgramParm.lgProgramAreaList[i].areaType==6){
									that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].mMessage=that.msg2[i]+'?|?'+editDom[i].innerHTML+'?|?'+that.msg[i]
								}
							}
							editProgram(that.addProgramParm).then(
								res => {
									if (res.code == 200) {
										that.msgSuccess("修改成功");
										that.$emit('show')
									} else {
										that.$message.error(res.msg)
									}
								}
							)
						} else {
							let editDom = document.getElementsByClassName('editTimeBox')
							for(let i=0;i<that.msg2.length;i++){
								if(that.addProgramParm.lgProgramAreaList[i].areaType==6){
									that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].mMessage=that.msg2[i]+'?|?'+editDom[i].innerHTML+'?|?'+that.msg[i]
								}
							}
							that.addProgramParm.deptId = that.$store.state.deptId;
							that.addProgramParm.voiceMessage = that.voiceValue
							that.addProgramParm.pNo = that.value4
							that.hangdChangeVau();
							addProgram(that.addProgramParm).then(
								res => {
									if (res.code == 200) {
										that.msgSuccess("新增成功");
										that.$emit('show')
									} else {
										that.$message.error('新增失败')
									}
								}
							)
						}
					}
				
				} else {
					that.$message({
						showClose: true,
						message: '节目内容不能为空哦！',
						type: 'warning'
					});
				}
			},
			// 新增节目和修改节目
			async addPrograms() {
				let that = this
				// let str=''
				// for(let i=0;i<this.msg.length;i++){
				// 	str+=(this.msg[i]+' ')
				// }
				if(this.msg.length>0){
					let str=''
					for(let i=0;i<this.msg.length;i++){
						str+=(this.msg[i]+' ')
					}
					axios({
						  url:process.env.VUE_APP_SHU_JU+Cookies.get('Access_token')+'&text='+str,
						  method: 'post',
						  headers: {
						    'Content-Type': 'application/x-www-form-urlencoded',
							'Access-Control-Allow-Origin': '*',
							"access-control-allow-credentials": "true"
						  },
					}).then(function (res) {
						if(res.data.conclusionType==2){
							that.$message({
								showClose: true,
								message: '存在不合规的敏感词！',
								type: 'warning'
							});
						}else{
							that.panDuanProgram()
						}
					})
				}else{
					that.panDuanProgram()
				}
				// if(this.addList.findIndex(target=>target.areaType==1)==-1){
				// 	this.panDuanProgram()
				// }else{
				// 	axios({
				// 		  url:process.env.VUE_APP_SHU_JU+Cookies.get('Access_token')+'&text='+str,
				// 		  method: 'post',
				// 		  headers: {
				// 		    'Content-Type': 'application/x-www-form-urlencoded',
				// 			'Access-Control-Allow-Origin': '*',
				// 			"access-control-allow-credentials": "true"
				// 		  },
				// 	}).then(function (res) {
				// 		// console.log(res)
				// 		if(res.data.conclusionType==2){
				// 			that.$message({
				// 				showClose: true,
				// 				message: '存在不合规的敏感词！',
				// 				type: 'warning'
				// 			});
				// 		}else{
				// 			that.panDuanProgram()
				// 		}
				// 	})
				// }
			}


		},
		created() {
			programsParm().then(
				res => {
					this.entryMode = res.data
					if (this.text == true) {
						this.btnText = '确认修改'
						programsNo(this.$store.state.deptId).then(
							res => {
								this.programsNos = res.data[0]
								this.flag = true
							}
						)
						this.addProgramParm = JSON.parse(JSON.stringify(this.txt))
						// 节目信息	
						if(this.addProgramParm.lgProgramTimeList.length>0){
							this.checked=true
						}
						let dayArr=this.addProgramParm.pDays.replace("[",'').replace("]",'').split(',')
						for(let i=0;i<dayArr.length;i++){
							dayArr[i]=parseInt(dayArr[i])
						}
						this.valueDay=dayArr
						this.isprogramTitle = false;
						this.value4 = this.addProgramParm.pNo
						this.voiceValue = this.addProgramParm.voiceMessage
						if (this.addProgramParm.isPlayVoice == 1) {
							this.isvoiceValue = true
						}else if (this.addProgramParm.isPlayVoice == 2) {
							this.checked2 = true
						}	
						this.addProgramParm.startTime = this.addProgramParm.startTime + ' 00:00:00'
						this.addProgramParm.endTime = this.addProgramParm.endTime + ' 23:59:59'
						this.textIndex = this.addProgramParm.lgProgramAreaList.length - 1
						this.value3[0] = this.arr2[0].options[this.addProgramParm.pType].label
						this.value3[1] = this.arr2[1].options[this.addProgramParm.isPlayVoice == 2 ? 0 : this.addProgramParm.isPlayVoice].label
						this.value3[2] = this.arr2[2].options[this.addProgramParm.playType].label
						this.broadcastNum = this.addProgramParm.playTime
						let sta = this.addProgramParm.startTime.substring(0, 11).split("-")
						let end = this.addProgramParm.endTime.substring(0, 11).split("-")
						this.valueDate = [new Date(sta[0], sta[1] - 1, sta[2], 0, 0), new Date(end[0], end[1] - 1, end[2], 23, 59)]
						this.valueNumber = this.addProgramParm.lgProgramTimeList.length==0?1:this.addProgramParm.lgProgramTimeList.length
						for (let i = 0; i < this.addProgramParm.lgProgramTimeList.length; i++) {
							this.valueTime[i] = [this.addProgramParm.lgProgramTimeList[i].tStart, this.addProgramParm
								.lgProgramTimeList[i].tEnd
							]
						}
						this.timeLength.length = this.addProgramParm.lgProgramTimeList.length==0?1:this.addProgramParm.lgProgramTimeList.length
						let arr = [[],[],[]]
						let arr3 = [[],[],[]]
						let arr2 = [[],[],[]]
						let that = this
						for (let i = 0; i < this.addProgramParm.lgProgramAreaList.length; i++) {
							if (this.addProgramParm.lgProgramAreaList[i].areaType == 1) {
								this.addList[i] = this.btnData[0]
								this.msg[i] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].mMessage
							} else if (this.addProgramParm.lgProgramAreaList[i].areaType == 2) {
								this.addList[i] = this.btnData[1]
							} else if (this.addProgramParm.lgProgramAreaList[i].areaType == 3) {
								this.addList[i] = this.btnData[2]
								this.isGif = false
							} else if (this.addProgramParm.lgProgramAreaList[i].areaType == 6) {
								this.addTimeDomArr[i]=[this.classNums,this.classNums,this.classNums]
								this.valueCheck[i]=[undefined,undefined,undefined]
								this.valueCheck2[i]=[undefined,undefined,undefined]
								this.checkDate[i]=[false,false,false]
								this.addList[i] = this.btnData[3]
								this.classNums=10
								this.classNames=[10,10,10]
								setTimeout(function(){
									that.getTime(i)
									let editDom = document.getElementsByClassName('editTimeBox')
									let dTime=that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].lgFile.createBy.split('?|?')[0]
									editDom[i].innerHTML=that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].lgFile.createBy.split('?|?')[1]
									if(editDom[i].innerHTML.indexOf('reqi')!=-1){
										  that.checkDate[i][0]=true	  
										  for(let z=0;z<editDom[i].childNodes.length;z++){
											  if(editDom[i].childNodes[z].className=='reqi'){
												let reqiDom=document.getElementById(editDom[i].childNodes[z].id)
												for(let d=0;d<that.editTimeArr[0].options.length;d++){
													if(dTime.indexOf(that.editTimeArr[0].options[d].type)!=-1){
														reqiDom.setAttribute('value',that.editTimeArr[0].options[d].text)
														 console.log(that.editTimeArr[0].options[d].text)
														 that.valueCheck[i][0]=that.editTimeArr[0].options[d].text
													}
												}  
											  }
										  }
									}
									if(editDom[i].innerHTML.indexOf('shijian')!=-1){
										that.checkDate[i][1]=true
										for(let z=0;z<editDom[i].childNodes.length;z++){
											if(editDom[i].childNodes[z].className=='shijian'){
												let shijianDom=document.getElementById(editDom[i].childNodes[z].id)
												for(let d=0;d<that.editTimeArr[1].options.length;d++){
													if(dTime.indexOf(that.editTimeArr[1].options[d].type)!=-1){
														shijianDom.setAttribute('value',that.editTimeArr[1].options[d].text)
														that.valueCheck[i][1]=that.editTimeArr[1].options[d].text
													}										  
												}																					  
											}										  
										}
									}
									if(editDom[i].innerHTML.indexOf('xingqi')!=-1){
										that.checkDate[i][2]=true
										for(let z=0;z<editDom[i].childNodes.length;z++){
											if(editDom[i].childNodes[z].className=='xingqi'){
												let xingqiDom=document.getElementById(editDom[i].childNodes[z].id)
												for(let d=0;d<that.editTimeArr[2].options.length;d++){
													if(dTime.indexOf(that.editTimeArr[2].options[d].type)!=-1){
														xingqiDom.setAttribute('value',that.editTimeArr[2].options[d].text) 
													}										  
												}																					  
											}										  
										}
									}
									that.setMsgText(i)
									that.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].lgFile.createBy=null
								},100)
								
							}
							this.pType[i] = this.addProgramParm.lgProgramAreaList[i].areaType
							this.countArr[0].num[i] = this.addProgramParm.lgProgramAreaList[i].areaStartX
							this.countArr[1].num[i] = this.addProgramParm.lgProgramAreaList[i].areaStartY
							this.countArr[2].num[i] = this.addProgramParm.lgProgramAreaList[i].areaWidth
							this.countArr[3].num[i] = this.addProgramParm.lgProgramAreaList[i].areaHeight
							this.countArr[4].num[i] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0]
								.stayTime
							this.countArr[5].num[i] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0]
								.inSpeed
							this.widthArr[i] = {
								widths: this.addProgramParm.lgProgramAreaList[i].areaWidth,
								heights: this.addProgramParm.lgProgramAreaList[i].areaHeight
							}
							this.liStyles[i] = 'left:' + this.countArr[0].num[i] + 'px;top:' + this.countArr[1].num[
								i] + 'px;width:' +
								this.countArr[2].num[i] + 'px;height:' + this.countArr[3].num[i] + 'px'
							let a = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].inType - 1
							let b = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].fontColor
							let c = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[0].fontSize - 1
							this.styleObj[i]['changes0'] = this.arr[0].options[a].styles[i] + ';';
							this.styleObj[i]['changes1'] = this.arr[1].options[b].styles + ';';
							this.styleObj[i]['changes2'] = this.arr[2].options[c].styles + ';';
							this.styleStr[i] = []
							for (let j in this.styleObj[i]) {
								this.styleStr[i] += this.styleObj[i][j]
							}
							that.value[i][0] = that.entryMode[0].options[that.addProgramParm.lgProgramAreaList[i]
								.lgProgramMaterialList[0].inType - 1].configName
							that.value[i][1] = that.entryMode[1].options[that.addProgramParm.lgProgramAreaList[i]
								.lgProgramMaterialList[0].fontColor].configName
							that.value[i][2] = that.entryMode[2].options[that.addProgramParm.lgProgramAreaList[i]
								.lgProgramMaterialList[0].fontSize - 1].configName
							that.getAnimation()
							this.positionArr[i] = {
								lefts: this.addProgramParm.lgProgramAreaList[i].areaStartX,
								tops: this.addProgramParm.lgProgramAreaList[i].areaStartY
							}
							for (let j = 0; j < this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList
								.length; j++) {
								arr[i][j] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[j].lgFile
									.fRelativePath
								arr3[i][j] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[j].lgFile
									.fIsMaterial
								arr2[i][j] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList[j].fFileId
							}
							this.dialogImageUrl = arr
							this.isImagelaiyuan = arr3
							this.fileIds = arr2
							this.lgProgramMaterialList[i] = this.addProgramParm.lgProgramAreaList[i].lgProgramMaterialList
						}
						this.$forceUpdate();
					} else {
						for(let i=0;i<3;i++){
							this.countdownValue[i]=new Date(new Date().getTime()+24*60*60*1000)
						}
						programsNo(this.$store.state.deptId).then(
							res => {
								this.programsNos = res.data[0]
								const result = this.programsNos.options.map(item => item.configStatus).indexOf(0)
								if (result == -1) {
									this.$message.error('该设备节目号已用完!')
								} else {
									this.value4 = result
									this.flag = true
								}
							}
						)
					}
				}
			)
		},
		mounted() {
			this.imgArrDel = []
		},
		watch: {
			card() {
				this.ladd()
			}
		},
		// beforeDestroy() {
		// 	//清除定时器
		// 	for (let i = 0; i < this.timeSet.length; i++) {
		// 		clearInterval(this.timeSet[i].timer);
		// 	}
		// 	for (let i = 0; i < this.clearTime.length; i++) {
		// 		clearInterval(this.clearTime[i]);
		// 	}
		// },
	}
</script>
<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.editjiemuBox {
		position: relative;
		margin: 0px auto;
		// border: 1px solid gray;
		width: 100%;
		height: 100%;

		.layoutStructure {
			color: #606266;
			font-size: 14px;
			font-weight: 700;
		}

		.editList {
			position: absolute;
			width: 100%;
			left: 0;
			display: flex;

			.listLeft {
				width: 15%;

				.btnType {
					display: flex;
					background-color: #f7f7f7;
					flex-wrap: wrap;

					div {
						padding: 10px 5px;
						width: 50px;
						color: red;
						cursor: pointer;
						font-weight: 700;
						text-align: center;

						span {
							color: #1296db;
							font-size: 30px;
						}

						&:hover {
							background-color: lightgray;
						}
					}
				}

				.programMsg {
					padding: 10px;
					background-color: #337ab7;
					border-radius: 5px;
					color: #fff;
					cursor: pointer;

					span {
						margin-right: 5px;
					}
				}

				ul {
					li {
						width: 100%;
						cursor: pointer;
						color: #1296db;
						padding: 10px;
						display: flex;
						justify-content: space-between;

						p {
							display: flex;
							align-items: center;
						}

						span {
							font-size: 25px;
						}

						.el-icon-close {
							color: red;
						}
					}

					.active {
						background-color: lightgray;
					}
				}
			}

			.viewDom {
				// display: flex;
				// flex-direction: column;
				width: 85%;
				text-align: center;
				background-color:blanchedalmond;
				max-height: 80vh;
				overflow-x: hidden;
				overflow-y: auto;

				.btnKiss {
					margin: 5px 12px;
				}

				--viewWidth:0;
				--viewHeight:0;

				--spanWidth0:0;
				--spanHeighth0:0;
				--liWidth0:0;
				--liHeight0:0;
				--viewRight0:0;
				--viewBottom0:0;
				--inSeep0:1s;

				--spanWidth1:0;
				--spanHeighth1:0;
				--liWidth1:0;
				--liHeight1:0;
				--viewRight1:0;
				--viewBottom1:0;
				--inSeep1:1s;

				--spanWidth2:0;
				--spanHeighth2:0;
				--liWidth2:0;
				--liHeight2:0;
				--viewRight2:0;
				--viewBottom2:0;
				--inSeep2:1s;

				.viewDom-top {
					width: 100%;
					background-color: #cdd3ca;
					padding: 5px;
					min-height: 100px;
					display: flex;
					align-items: center;
					justify-content: center;

					.viewDom-vi {
						overflow: hidden;
						background-color: #000;
						margin: 0 auto;
						position: relative;
						box-sizing: content-box;

						li {
							position: absolute;
							overflow: hidden;
							background-color: #000;
							box-sizing: content-box;
							border: 1px solid red;
							color: #fff;

							.itsShow {
								width: 100%;
								height: 100%;
								position: relative;

								.spanBox {
									position: absolute;
									top: 0;
									left: 0;
									color: red;
									font-size: 16px;
									display: flex;
									line-height: 16px;
									word-wrap: break-word;
									word-break: break-all;
									font-family: Simsun, sans-serif;
									white-space: pre-wrap;
									text-align: left;
									animation-fill-mode: forwards;
									animation-timing-function: linear;
								}
							}

							;

							&.bgcActive {
								background-color: #41413D;
							}

							;

							&:nth-of-type(1) {
								.itsShow {
									.spanBox {
										animation-duration: var(--inSeep0);
										// width:var(--spanWidth0);
									}
								}
							}

							;

							&:nth-of-type(2) {
								.itsShow {
									.spanBox {
										animation-duration: var(--inSeep1);
										// width: var(--spanWidth1);
									}
								}
							}

							;

							&:nth-of-type(3) {
								.itsShow {
									.spanBox {
										animation-duration: var(--inSeep2);
										// width: var(--spanWidth2);
									}
								}
							}
						}

					}
				}

				@keyframes getRight0 {
					0% {
						left: var(--spanWidth0)
					}

					;

					100% {
						left: var(--viewRight0)
					}

					;
				}

				@keyframes getRight1 {
					0% {
						left: var(--spanWidth1)
					}

					;

					100% {
						left: var(--viewRight1)
					}

					;
				}

				@keyframes getRight2 {
					0% {
						left: var(--spanWidth2)
					}

					;

					100% {
						left: var(--viewRight2)
					}

					;
				}

				@keyframes getLeft0 {
					0% {
						left: var(--liWidth0)
					}

					;

					100% {
						left: 0
					}
				}

				@keyframes getLeft1 {
					0% {
						left: var(--liWidth1)
					}

					;

					100% {
						left: 0
					}
				}

				@keyframes getLeft2 {
					0% {
						left: var(--liWidth2)
					}

					;

					100% {
						left: 0
					}
				}

				@keyframes getBottom0 {
					0% {
						top: var(--spanHeighth0)
					}

					;

					100% {
						top: var(--viewBottom0)
					}
				}

				@keyframes getBottom1 {
					0% {
						top: var(--spanHeighth1)
					}

					;

					100% {
						top: var(--viewBottom1)
					}
				}

				@keyframes getBottom2 {
					0% {
						top: var(--spanHeighth2)
					}

					;

					100% {
						top: var(--viewBottom2)
					}
				}

				@keyframes getTop0 {
					0% {
						top: var(--liHeight0)
					}

					;

					100% {
						top: 0
					}
				}

				@keyframes getTop1 {
					0% {
						top: var(--liHeight1)
					}

					;

					100% {
						top: 0
					}
				}

				@keyframes getTop2 {
					0% {
						top: var(--liHeight2)
					}

					;

					100% {
						top: 0
					}
				}

				@keyframes getInfiniteLeft0 {
					0% {
						left: var(--liWidth0)
					}

					;

					80% {
						left: 0
					}

					;

					100% {
						left: 0
					}

					;
				}

				@keyframes getInfiniteLeft1 {
					0% {
						left: var(--liWidth1)
					}

					;

					60% {
						left: 0
					}

					;

					100% {
						left: 0
					}

					;
				}

				@keyframes getInfiniteLeft2 {
					0% {
						left: var(--liWidth2)
					}

					;

					80% {
						left: 0
					}

					;

					100% {
						left: 0
					}

					;
				}

				@keyframes getInfiniteRight0 {
					0% {
						left: var(--spanWidth0)
					}

					;

					80% {
						left: var(--viewRight0)
					}

					;

					100% {
						left: var(--viewRight0)
					}

					;
				}

				@keyframes getInfiniteRight1 {
					0% {
						left: var(--spanWidth1)
					}

					;

					80% {
						left: var(--viewRight1)
					}

					;

					100% {
						left: var(--viewRight1)
					}

					;
				}

				@keyframes getInfiniteRight2 {
					0% {
						left: var(--spanWidth2)
					}

					;

					80% {
						left: var(--viewRight2)
					}

					;

					100% {
						left: var(--viewRight2)
					}

					;
				}

				@keyframes getInfiniteTop0 {
					0% {
						top: var(--liHeight0)
					}

					;

					80% {
						top: 0
					}

					;

					100% {
						top: 0
					}
				}

				@keyframes getInfiniteTop1 {
					0% {
						top: var(--liHeight1)
					}

					;

					80% {
						top: 0
					}

					;

					100% {
						top: 0
					}
				}

				@keyframes getInfiniteTop2 {
					0% {
						top: var(--liHeight2)
					}

					;

					80% {
						top: 0
					}

					;

					100% {
						top: 0
					}
				}

				@keyframes getInfiniteBottom0 {
					0% {
						top: var(--spanHeighth0)
					}

					;

					80% {
						top: var(--viewBottom0)
					}

					;

					100% {
						top: var(--viewBottom0)
					}
				}

				@keyframes getInfiniteBottom1 {
					0% {
						top: var(--spanHeighth1)
					}

					;

					80% {
						top: var(--viewBottom1)
					}

					;

					100% {
						top: var(--viewBottom1)
					}
				}

				@keyframes getInfiniteBottom2 {
					0% {
						top: var(--spanHeighth2)
					}

					;

					80% {
						top: var(--viewBottom2)
					}

					;

					100% {
						top: var(--viewBottom2)
					}
				}

				.selectBox {
					width: 100%;
					border: 1px solid #428bca;
					padding: 5px 0;
					position: relative;

					.programTitle {
						position: absolute;
						padding: 3px 15px;
						font-weight: 700;
						background-color: #428bca;
						color: #fff;
						left: -1px;
						top: -15px;
						border-radius: 15px;
					}

					.programMsgshuju {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						padding: 5px;

						.ddf {
							width: 33%;
							padding-top: 5px;
							text-align: left;

							&.dda {
								width: 60%;
							}
						}
						
						.ddy {
							width: 100%;
							margin-top: 5px;
							text-align: left;
							.el-select {
								width: 600px;
							}
						}

						.ddd {
							width: 100%;
							display: flex;
							border: 1px solid red;
							flex-wrap: wrap;
							padding: 5px 10px;
							margin-top: 5px;
							text-align: left;

							.ddk {
								width: 100%;
								display: flex;
								flex-wrap: wrap;

								div {
									width: 50%;
									margin-top: 3px;

									.el-date-editor--timerange.el-input__inner {
										width: 240px;
									}

									.el-date-editor .el-range-input {
										width: 80px;
									}
								}
							}

							.ddz {
								text-align: left;
								margin-top: 5px;
								width: 100%;

								.el-select {
									width: 20%;
								}
							}

							// .ddy {
							// 	width: 100%;
							// 	margin-top: 5px;
							// 	.el-select {
							// 		width: 600px;
							// 	}
							// }
						}

					}

					.selectList {
						display: flex;
						width: 100%;
						flex-wrap: wrap;
						// justify-content: right;

						.dan {
							width: 32%;
							// text-align: right;
							margin: 8px 3px 0;

							.el-select {
								width: 65%;
							}

							.el-input-number {
								width: 65%;
							}
							
							.personas{
								span{
									margin: 5px;
									color: red;
								}
							}
						}
					}

					.textareaBox {
						width: 100%;
						margin-top: 5px;
					}

					.textareaBox2 {
						display: flex;
						flex-wrap: wrap;
						max-height: 300px;

						.imgShow {
							display: flex;
							flex-wrap: wrap;
							align-content: flex-start;
							overflow: auto;
							border-left: 1px solid yellowgreen;

							div {
								position: relative;

								span {
									position: absolute;
									right: 0;
									top: 0;
									color: red;
									background-color: gray;
									cursor: pointer;
									display: none;
								}

								img {
									max-height: 140%;
								}

								&:hover {
									span {
										display: block;
									}
								}
							}
						}

						.upload-demo {
							height: 140px;
							display: flex;
							margin-top: 5px;
							position: relative;

							.el-upload-dragger {
								width: 150px;
								height: 100px;
								text-align: center;

								.el-icon-upload {
									margin: 0;
								}
							}

							.el-upload__tip {
								position: absolute;
								top: 100px
							}
						}

						.editTimeBox .el-input.is-active .el-input__inner,
						.editTimeBox .el-input__inner {
							border: 1px dashed green;
							background-color: #fff;
						}
						.editTimeBox{
							width:100%;
							height:100px;
							background:#fff;
							border: 1px solid gray;
							margin-top: 5px;text-align: left;
							-webkit-user-select: none;
							-moz-user-select: none;
							-o-user-select: none;
							user-select: none;  	
							-ms-user-select: none;    
							
							input{
								width:150px;
								text-align: center;
								padding: 5px 0;
								outline:none;
								border:1px solid lightgray;
								pointer-events:none
								
							}
						}
						.countdownBox .el-input.is-active .el-input__inner,
						.countdownBox .el-input__inner {
							border: 1px dashed green;
							background-color: #fff;
						}
						.countdownBox{
							width:100%;
							height:100px;
							background:#fff;
							border: 1px solid gray;
							margin-top: 5px;text-align: left;
							-webkit-user-select: none;
							-moz-user-select: none;
							-o-user-select: none;
							user-select: none;  	
							-ms-user-select: none;    
							
							input{
								width:150px;
								text-align: center;
								padding: 5px 0;
								outline:none;
								border:1px solid lightgray;
								pointer-events:none
								
							}
						}
					}
				}
			}

			.viewDomTwo {
				display: flex;
				justify-content: space-between;

				.viewDom-top {
					border: 1px solid gray;
					height: 80vh;
					padding: 10px;
				}

				.btnKiss {
					.el-button {
						width: 10%;
						margin: 10px;
						padding: 8px 0;
					}

					.el-select {
						width: 28%;
					}
				}

				.selectBox {
					flex-grow: 1;

					.programMsgshuju {
						border: 1px solid gray;

						.ddf {
							width: 50%;
							padding-top: 5px;
							text-align: left;

							&.dda {
								width: 100%;
							}
						}
						
						.ddy {
							width: 100%;
							margin-top: 5px;
							text-align: left;
						
							.el-select {
								width: 82%;
						
							}
						}
						.ddd {
							width: 100%;
							display: flex;
							border: 1px solid red;
							padding: 3px;
							flex-wrap: wrap;
							margin-top: 5px;
							text-align: center;

							.ddk {
								width: 100%;
								display: flex;
								flex-wrap: wrap;

								div {
									width: 50%;
									margin-top: 2px;
									text-align: left;

									.el-date-editor--timerange.el-input__inner {
										width: 85%;
									}

									.el-date-editor .el-range-input {
										// width: 80px;
									}
								}
							}

							.ddz {
								text-align: left;
								width: 100%;

								.el-select {
									width: 58%;
								}
							}

							// .ddy {
							// 	width: 100%;
							// 	margin-top: 5px;
							// 	text-align: left;

							// 	.el-select {
							// 		width: 82%;

							// 	}
							// }
						}
					}
				}
			}
		}

		.fileList {
			background-color: #fff;
			position: relative;
			width: 100%;

			.radioBox {
				width: 100%;
				overflow-y: auto;
				display: flex;
				flex-wrap: wrap;
				padding: 5px;
				height: 470px;
				align-content: flex-start;

				.el-radio {
					border: 1px solid gray;
					border-radius: 5px;
					margin-right: 5px;
					padding: 5px;
					margin-bottom: 5px;
					text-align: center;
					position: relative;

					.el-radio__input {
						position: absolute;
						left: 5px;
						top: 5px;
					}

					// p {
					// 	position: absolute;
					// 	bottom: -20px;
					// 	left: 50%;
					// 	transform: translateX(-50%);
					// }
					// img {
					// 	height: 100%;
					// }
				}
			}
		}
	}
	.ulAddBox{
		li{
			border: 1px solid #cccccc;
			// background-color: #a7c0dc;
			border-radius: 5px;
		}
	}
</style>
